Bootstap in Angular 7 | How to use Bootstrap Components in Angular 4+ Versions in Few Steps

We all know about Bootstrap is a free and open-source Web framework, widely used by developer whether they are using jQuery or AngularJS in development.

Bootstrap takes away headache for making application responsive and making it compatible to cross browsers. Moreover, it provides very easy to use plug and play HTML and working web widgets making development a swing.

But these days Angular is moving far ahead from AngularJS and jQuery as many enterprises and individuals looking Angular as a good option for many reasons we all know. When we look for developing front-end, only one option comes to mind Angular Material which is closely developed to make it more compatible with Angular. One question always comes in mind.

Is it possible to use Bootstrap with the latest version of Angular like 5/6/7?

The answer is Yes! can easy use Bootstrap in out Angular project in the latest version like 4/5/6/7. Here we will discuss on how to install Bootstrap quickly and How to use its beautifully crafted plug/play components in the application.

Installing Bootstrap

Installing via NPM, run following npm command to install ng-bootstrap package

Next, open app.module.ts then import NgbModule then add in imports array also add HttpClientModule as we will make HTTP calls to IMDB API

Here we will test Bootstrap’s most loved and used Auto suggestion component known as Typeahead.

In Home component, we will add an Input bar from where a user can search IMDB movies using HTTP get call to public API.

In home.page.ts file add the following code

 

 

In home.page.html add follow

Here we used [resultTemplate] to modify suggestions for IMDB result set. You can check more options and details here

Leave a Reply

avatar
  Subscribe  
Notify of