How to Use Bootstrap 4 with Angular

Bootstrap is the most popular HTML, CSS, and Javascript framework for developing website and web applications. Angular is a web application framework used for creating dynamic websites. Bootstrap and Angular are great tools for front-end web development. There are many websites that make use of the power of Bootstrap and Angular to create stunning websites or web applications. For example, Kodable and Bizns. So it seems logical to combine these two frameworks to create great looking web applications. But unfortunately, Bootstrap and Angular do not work very well together. There are some issues when using Bootstrap and Angular together in the same project. These issues arise because of using Bootstrap JS, which uses the jQuery library, together with Angular. Bootstrap has a dependency on JQuery. It uses the jQuery library for the components like tooltips, modals, popovers etc. When using Angular in your projects, you should not add jQuery library with Angular. Bootstrap JS will create a conflict with Angular. The reason for this conflict is that the way jQuery and Angular manipulates the view is completely different. jQuery manipulates the data in the view is by grabbing and injecting DOM based on events. The data manipulation in Angular takes place by data-binding. This means that a variable is bound to the component. The state of the component is changed based on the true or false value of the variable. Angular already has jQlite included in it and does not depend on jQuery. For this reason, you don’t need to include jQuery. So, is there any way you can combine the two frameworks? Yes, there are two ways that you can Bootstrap to make the development of the UI easier and Angular to make DOM manipulation, HTTP requests, and a whole lot other things easier. The first solution is to use the Bootstrap CSS only. But this way you can create Bootstrap components that do not use JavaScript. You will have to build your components that require JavaScript on your own, from scratch. The other option is to use other libraries like UI Bootstrap or ng-bootstrap that combines the best of both worlds. In this article, we will be discussing the Angular project ng-Bootstrap which has a set of Angular directives that is based on Bootstrap.

Getting Started with ng-bootstrap

ng-bootstrap is a repository that allows you to use Bootstrap with Angular without any dependency on jQuery or Bootstrap’s JavaScript. ng-bootstrap is a repository that contains native Angular directives based on Bootstrap’s HTML markup and CSS. So, you can have Bootstrap’s styles with the power of Angular with ng-Bootstrap. Before you install ng-bootstrap, you need to install the only two dependencies required. They are:

• Angular 4+, and
• Bootstrap 4 CSS

Next, to include Angular, in this article we will be using Angular CLI. To install Angular CLI in your project, enter the following command using npm.

npm install -g @angular/cli

Now, you can initiate a new project in the following way.

ng new mynewproject

This will create a new project folder for you. Now navigate to the project folder and start up the web server.

cd mynewproject

You can install Bootstrap using npm using the command

npm install bootstrap

After installing these dependencies, you can install ng-bootstrap as an npm package using the command

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

To start the web server, enter the following command.

ng serve

After installation, you need to import ng-bootstrap’s main module. To do that add the following statement to app.module.ts file.

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

Next, what you need to do is list the imported module to your application module as follows.

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

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

Other modules in the application can simply import ngbModule as follows:

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

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

Start Coding With ng-bootstrap

ng-bootstrap has many components that are already there in Bootstrap and some more. The documentation of ng-bootstrap is very descriptive and you can go through the documentation and the getting started page on ng-bootstrap to familiarize yourself with the components. In the ng-bootstrap documentation, you can find code example for all the components that you can use directly to your project so that you don’t have to build anything from the ground up. So let’s start by adding a simple dropdown to our example.

<div class="row center">
  <div class="col">
    <div ngbDropdown class="d-inline-block">
      <button class="btn btn-outline-primary" id="dropdownBasic1" ngbDropdownToggle>Toggle dropdown</button>
      <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
        <button class="dropdown-item">Action - 1</button>
        <button class="dropdown-item">Another Action</button>
        <button class="dropdown-item">Something else is here</button>
      </div>
    </div>
  </div>
</div>

It will create a simple drop-down button like this. Now let’s try a combination of some of these components in an example. Let’s create a page with three tabs with a star rating, progress bars, and popovers in each tab.

<div class="container">
   <ngb-tabset type="pills">
      <ngb-tab title="Simple">
         <ng-template ngbTabContent>
            <p>Star ratings using ng-bootstrap</p>
                <ngb-rating [(rate)]="currentRate">
                    <ng-template let-fill="fill">
                       <span class="star" [class.filled]="fill === 100">★</span>
                    </ng-template>
                </ngb-rating>
                <hr>
                <pre>Rate: <b>{{currentRate}}</b></pre>
         </ng-template>
      </ngb-tab>
   <ngb-tab>
      <ng-template ngbTabTitle><b>Fancy</b> title</ng-template>
      <ng-template ngbTabContent>
         <p>Progress bars using ng-bootstrap</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>
   </ng-template>
</ngb-tab>
<ngb-tab title="Not Disabled">
   <ng-template ngbTabContent>
      <p>Popovers that dismiss on the second click</p>
      <button type="button" class="btn btn-secondary" placement="top" ngbPopover="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." popoverTitle="Popover on top">
      Popover on top
      </button>
      <button type="button" class="btn btn-secondary" placement="right" ngbPopover="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." popoverTitle="Popover on right">
      Popover on right
      </button>
      <button type="button" class="btn btn-secondary" placement="bottom" ngbPopover="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." popoverTitle="Popover on bottom">
      Popover on bottom
      </button>
      <button type="button" class="btn btn-secondary" placement="left" ngbPopover="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." popoverTitle="Popover on left">
      Popover on left
      </button>
   </ng-template>
 </ngb-tab>
</ngb-tabset>
</div>

For some of these components, you need to add the typescript in your component.ts file. Typescript for the star rating

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

@Component({
  selector: 'ngbd-rating-template',
  templateUrl: './rating-template.html',
  styles: [`
    .star {
      font-size: 1.5rem;
      color: #b0c4de;
    }
    .filled {
      color: #1e90ff;
    }
  `]
})
export class NgbdRatingTemplate {
  currentRate = 6;

Typescript for progress bars

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

@Component({
  selector: 'ngbd-progressbar-basic',
  templateUrl: './progressbar-basic.html',
  styles: [`
    ngb-progressbar {
      margin-top: 5rem;
    }
  `]
})
export class NgbdProgressbarBasic {
}

  This code generates a page with three different tabs and a star rating, progress bars and popovers on each tab.

Note: ng-bootstrap and ngx-bootstrap are two different projects created by two different teams. They are different but used for the same purpose. One of the main difference is that you can use ngx-bootstrap for both Bootstrap 3 and Bootstrap 4. ng-bootstrap is only for Bootstrap 4.

BootstrapDash believes in providing the best, efficient and quality bootstrap admin template to get your web application up and running easily and quickly. Visit our website to get to know more about our products. Want to create a stunning website of your own? Start learning

The post How to Use Bootstrap 4 with Angular appeared first on BootstrapDash.