Use Angular 4 Bootstrap Components In 5 Minutes [With ng-bootstrap]

2

ng-bootstrap contains the set of native directives based on Angular 4 bootstrap components. So, you don’t require to use any other dependency on jQuery or Bootstrap’s JavaScript.

Getting started with Angular 4 Bootstrap Components

As you know that responsive UI is how much crucial for an application and to use bootstrap is wise decision as it’s one of the most popular frameworks to use in responsive applications.

That’s why I thought why not share an article that helps you to build your apps based on Angular 4 bootstrap components by using ng-bootstrap.

The only required depedencies are.

  • Angular (requires Angular version 4 or higher, tested with 4.0.3)
  • Bootstrap CSS (tested with 4.0.0-beta)

Install ng-bootstrap with Angular 4

Firstly, let’s install ng-bootstrap in our angular app using NPM.

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

Now, we just need to import it in our main module.

/src/app/app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import {FormsModule} from '@angular/forms';

import { AppComponent } from './app.component';

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

Takeaways,

  • Firstly, NgbModule is imported along with other necessary modules and mention NgbModule.forRoot() under imports section, to make the bootstrap working in our app.
  • Secondly, make sure that you import FormsModule whenever you’re going to use input elements in your app.

Note: Don’t forget to import bootstrap CSS file in index.html of your app.

Here, I’m using bootstrap CDN URL for our app.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">

Usage of bootstrap components

Now, you’re ready to use bootstrap components in your app as you already set up and installed the ng-bootstrap.

Use of bootstrap progress bars

Let’s simply use bootstrap progress bar in your app component.

/src/app/app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Use Angular 4 Bootstrap Components with ng-bootstrap';
}

There is a traditional component, nothing fancy over there. But you can mention the dynamic variables with values into the class as per your need.

Finally, let’s use the progressbar into the HTML template.

/src/app/app.component.html

<p><ngb-progressbar showValue="true" type="success" [value]="25"></ngb-progressbar></p>
<p><ngb-progressbar [showValue]="true" type="info" [value]="50"></ngb-progressbar></p>
<p><ngb-progressbar showValue="true" type="warning" [value]="150" [max]="200"></ngb-progressbar></p>
<p><ngb-progressbar [showValue]="true" type="danger" [value]="150" [max]="150"></ngb-progressbar></p>

That’s it, you can see the progress bars in your browser window.

Use of basic Ratings

It’s just as simple as to have a cup of coffee.

This will be your component file.

import {Component} from '@angular/core';

@Component({
  selector: 'ngbd-rating-basic',
  templateUrl: './rating-basic.html'
})
export class NgbdRatingBasic {
  currentRate = 8;
}

This will be your template file.

<ngb-rating [(rate)]="currentRate"></ngb-rating>
<hr>
<pre>Rate: <b>{{currentRate}}</b></pre>

Here we go! It’s easy to implement and use angular 4 bootstrap components like Alerts, Accordion, Buttons, Pagination, Datepicker and much more using ng-bootstrap. Here, you can find the complete list of examples by ng-bootstrap.

Also, you can use bootstrap components using ngx-bootstrap.

Moreover, feel free to share your questions/suggestion by commenting below.

2
Leave a Reply

avatar
1 Comment threads
1 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
2 Comment authors
Mohit TanwaniByron Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
Byron
Guest
Byron

Please assist.
There must be something else that still needs to be done to get this to work?
How do you display this component?