Angular 7 Bootstrap 4 | Date-picker and Time-picker Example Implement in Angular Application

Bootstrap is a pack of beautiful ready to plug UI components and also helps mobile first application development. Bootstrap with Angular can make more powerful apps with already tried and tested web UI components which are fully responsive and supportive for any screen size.

With ng-bootstrap‘s latest version 4.1.0 we can develop an application in Angular’s latest version 7. In this post we will get to know to include Bootstrap in Angular 7 project and also implement Datepicker and Time Picker Bootstrap component is a new Angular Project.

Let’s begin!

Create New Angular Project Using CLI

First, we will create a new Angular Project using Angular CLI. Make sure you have installed the latest version on Angular CLI by running following command

Create a new Angular project then select few options asked. We have not selected Angular routing to make this demo easier.

Change directory to point our project

If you have Visual Studio Code installed then run following command to open the project in VS Code directly.


Install Bootstrap in Angular Project

Let’s install Bootstrap by running following NPM command. This will install latest bootstrap version ( Current is 4.1.0 )

ng-bootstrap includes UI components only, so for adding styling to these components we need to include CSS styling file in the index.html at Angular project root


Import NgbModule ( Bootstrap module ) & FormsModule ( for Angular as we will use [(ngModel)] ) in the app.module.ts file


Add Datepicker Bootstrap Component in Application

Bootstrap package @ng-bootstrap/ng-bootstrap includes all type on UI components separately, so whichever is required we can simply import only that component. For example, here we need only Datepicker component so we will import it in our component.

Simple datepicker

Datepicker in a popup


You can check more working examples here

Bootstrap Timepicker in Angular Application

Similarly, for Timepicker, we need to import the time picker module in our component to use it


Check more examples for Timepicker here

Bootstrap is already loaded with UI widgets which are very simple and easy to use with fully featured options, so by following above steps you can add any type of Bootstrap widget in Angular’s latest version.


Leave a Reply

Notify of