Angular 10 Bootstrap 4 Timepicker Example
In this tutorial, we will explain to you how to create a bootstrap 4 timepicker in angular 10(Angular 10 Bootstrap 4 Timepicker Example). here we will use the ngx-bootstrap package for bootstrap 4 timpicker.
The ngx-bootstrap package is part of the bootstrap. the bootstrap provides many UI facilities like timepicker, model, button, etc. so we can easily install and use this package in our application.
Create new angular app
We will create a new angular app using the following command.
1 2 | ng new timepicker-example cd timepicker-example |
Install bootstrap 4 in angular
After the complete created application, you can install the bootstrap using the below command.
1 | npm install bootstrap --save |
now, we will install the ng bootstrap package using the following command.
1 | npm install --save @ng-bootstrap/ng-bootstrap |
We need to add the bootstrap CSS and NGX Datepicker path into the angular.json file. so first we will add that path into the angular.json file.
angular.json
1 2 3 4 5 | "styles": [ "node_modules/bootstrap/dist/css/bootstrap.min.css", "node_modules/ngx-bootstrap/datepicker/bs-datepicker.css", "src/styles.css" ] |
Import module in angular
In this step, we need to add a module into the src/app/app.module.ts file.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; import { FormsModule } from '@angular/forms'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, NgbModule, FormsModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } |
Update view file in angular
In this step, we will create the ngb-timepicker field. so you can see the below example.
src/app/app.component.html
1 2 3 4 5 6 7 8 9 | <div class="container"> <h2>Angular 10 Bootstrap 4 Timepicker Example</h2> <ngb-timepicker [(ngModel)]="time"></ngb-timepicker> <hr/> <pre>Selected time: {{time | json}}</pre> </div> |
Update component in angular
src/app/app.component.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'timepicker-example'; time = {hour: 14, minute: 30}; constructor() {} } |
Run Our Angular Application
Now we will run our Angular application using the below command.
1 | ng serve |
Read Also
Angular 10 Bootstrap 4 Datepicker Example
Install Bootstrap 4 In Angular 10 With Example