The ng-bootstrap, allow us to use Bootstrap Components and directive in Angular 4+ through ng-bootstrap. This makes it easy to use Bootstrap in your Angular apps.
Angular 4+ is required to use ng-bootstrap. ng-bootstrap depends on Bootstrap’s CSS being available, but you don’t need the Bootstrap JS or jQuery dependencies.
Step 1: Install the bootstrap through npm
To get started with Bootstrap in our Angular project, we will first have to install it as a dependency:
$ npm install –save bootstrap@next
The @next will install the latest version of Bootstrap 4 and not the bootstrap 3 stable version.
Step 2: Importing bootstrap CSS or SCSS file
Once we have installed Bootstrap, we have to import our bootstrap scss file in own Sass modules. We simply add an import statement to the top of our /src/styles.scss file in our Angular project:
This imports all of the Bootstrap using a special loader mechanism provided by sassloader. Our Angular application now has all of the Bootstrap 4 CSS framework available and ready to use.
We can import our bootstrap CSS file in style.css of our angular project as
To make the Bootstrap CSS classes available for the components in our project we need to include the Bootstrap CSS file from node_modules/bootstrap/dist/css/bootstrap.css in our project.
We have another option of importing our bootstrap file by just add the following code in the styles array of the .angular-cli.json file:
Step 3: We have to import our ng-bootstrap module in app.module.ts file
Step 4: Use the ng-bootstrap Component
Now that we have imported both Bootstrap-4 and ng-bootstrap module in our apps, we can use any of ng-bootstrap components it provides to us. Let’s add some of ng-bootstrap component :
Add the following code in app.component.html file