Bootstrap components in Angular (ng-bootstrap)

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.

As the Bootstrap 4 contains many different JavaScript-dependent components. Many of these components rely on jQuery for Document Object Model (DOM) manipulation and can adversely interact with Angular’s own View Encapsulation based data-binding. We will solve this issue using the Angular friendly versions of these components provided by the ng-bootstrap project.

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:

@import ‘~bootstrap/scss/bootstrap’;

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.

Or

We can import our bootstrap CSS file in style.css of our angular project as

@import “~bootstrap/dist/css/bootstrap.css”

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.

Or

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:

“../node_modules/bootstrap/dist/css/bootstrap.min.css”,

Step 3: We have to import our ng-bootstrap module in app.module.ts file

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
....
  imports: [
    BrowserModule,
    NgbModule.forRoot()
  ],

})
export class AppModule { }

 

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

<div class="jumbotron">
  <div class="container text-center">
    <ngb-alert type="success" [dismissible]="false">
      ng-bootstrap Working
    </ngb-alert>

    <h1>
      <i class="fa fa-bath" aria-hidden="true"></i>
      Bootstrap jumbotron
    </h1>
  </div>
</div>


<p>
  <ngb-alert [dismissible]="false">
    <strong>Warning!</strong> Better check yourself, you're not looking too good.
  </ngb-alert>
</p>

<div class="container">
  <p>
    A progress bar:
    <ngb-progressbar showValue="true" type="warning" [value]="85">
    </ngb-progressbar>
  </p>
</div>
<br/><br/>
<div class="container">
    <p>Popup box</p>
    <button type="button" class="btn btn-outline-secondary" placement="top"
    ngbPopover="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." popoverTitle="Popover on top">
      Popover on top
    </button>
</div>
<div class="container">
  <p>Rating</p>
  <ngb-rating [(rate)]="currentRate"></ngb-rating>
  <hr>
  <pre>Rate: <b>{{currentRate}}</b></pre>
</div>