Angular 2/4 & Bootstrap

First need to install Boostrap, jQuery and ng-bootstrap with:

  npm install bootstrap jquery @ng-bootstrap/ng-bootstrap --save

Next add Boostrap and jQuery file paths to angular-cli.json:

  "styles": [
    "styles.css",
    "../node_modules/bootstrap/dist/css/bootstrap.min.css"
  ],
  "scripts": [
    "../node_modules/jquery/dist/jquery.min.js",
    "../node_modules/bootstrap/dist/js/bootstrap.min.js"
  ],

And import of this component to app.module.ts:

import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

Next, we need to add this module to the imports array of the @NgModule decorator. If you want to import NgbModule in your root module (e.g. AppModule) you need to call the forRoot() factory method, as you can see in the following:

@NgModule({
  declarations: [AppComponent, ...],
  imports: [NgbModule.forRoot(), ...],
  bootstrap: [AppComponent]
})
export class AppModule {
}

If you want to import NgbModule in other modules (child modules of your root application module) you need to add it without calling the forRoot() method:

@NgModule({
  declarations: [OtherComponent, ...],
  imports: [NgbModule, ...]
})
export class OtherModule {
}

Let’s try it out and use some of these components in app.component.html:

<div class="container">
  <ngb-tabset>
    <ngb-tab title="Simple">
      <template ngbTabContent>
        <p>This is the content of the first tab!</p>
        <ngb-alert [dismissible]="false">
          <strong>Warning!</strong> This is an alert!
        </ngb-alert>
      </template>
    </ngb-tab>
    <ngb-tab>
      <template ngbTabTitle><b>Fancy</b> title</template>
      <template ngbTabContent>
        <p>This is the content of the second tab!</p>
        <p><ngb-progressbar type="success" [value]="25"></ngb-progressbar></p>
        <p><ngb-progressbar type="info" [value]="50"></ngb-progressbar></p>
        <p><ngb-progressbar type="warning" [value]="75"></ngb-progressbar></p>
        <p><ngb-progressbar type="danger" [value]="100"></ngb-progressbar></p>
      </template>
    </ngb-tab>
    <ngb-tab title="Disabled" [disabled]="true">
      <template ngbTabContent>
        <p>This tab is disabled</p>
      </template>
    </ngb-tab>
  </ngb-tabset>
</div>