How to install bootstrap in angular 12?

The ng-bootstrap library allows us to use bootstrap in angular, this library has components and directives built specifically for Angular. Bootstrap is a popular open-source CSS framework for building responsive, mobile-first web apps.

In this article’s we’ll explore and demonstrate different Angular bootstrap components using ng-bootstrap. In our Angular project, we can use different third-party UI libraries.

Angular also have its own UI library called Angular material design from Google and it’s recommended to use material design, but if you still need some component from bootstrap. Then is recommended to use ng-bootstrap in angular instead of installing the whole bootstrap. This makes it easy to use Bootstrap components in your Angular application.

In this article, we have three goals behind this tutorial. First, we will correct the way of installing bootstrap in the angular project. Secondly, we explore the difference between bootstrap and ng-bootstrap. At last, how to use the bootstrap component in our Angular project? Let’s get started.

Difference between bootstrap and ng-bootstrap ?

Both bootstrap and ng-bootstrap are front-end frameworks created by Twitter. Angular ng-bootstrap is built specifically for Angular. The official definition of ng-bootstrap is “Angular widgets built from the ground up using only Bootstrap 4 CSS with APIs designed for the Angular ecosystem”.

The ng-bootstrap library has no dependencies on 3rd party JavaScript. Bootstrap uses plain JavaScript and JQuery. Angular uses Typescript, so it would not be recommended to use Bootstrap directly in Angular and it may cause an issue while dealing with JavaScript of Bootstrap and JQuery. But we can still use the CSS part of it, an ng-bootstrap library that is compatible with Angular and doesn’t need JQuery.

Differents way of adding Bootstrap in Angular 12 ?

There are plenty of 3rd party libraries to add the bootstrap framework to our Angular project. We will discuss three ways of adding bootstrap and discuss the advantages or disadvantages of it.

LibraryNotesFiles Size
@ng-bootstrap/ng-bootstrapMost downloaded as compared to other libraries. Is built specifically for Angular, not dependent on JQuery which is javascript as Angular use typescript. We can use bootstrap components that are built specifically for Angular and are ready to use. 3.87 MB
ngx-bootstrapIt provides Bootstrap components powered by Angular, so you don’t need to include original JS components. 13.7 MB
bootstrapIs general for all web development, but it also includes javascript files, which we don’t need in Angular. So better use 1st and 2nd which are built for Angular.8.63 MB

Installing the above file to our Angular project is easy, we just have to replace the library name with the above.

npm install --save libraryName

I personally like ng-bootstrap, it had good documentation, is easy to use and the file size is also very small. We will learn and discuss ng-bootstrap in this tutorial.

Setup our angular bootstrap project

If you have not yet installed an Angular CLI on your system. Then we need to install an Angular first. Angular CLI allows us to create an Angular project, generate application and library code, and perform a variety of ongoing development tasks such as testing, bundling, and deployment. To install the Angular CLI, open a terminal and run the following command:

npm install -g @angular/cli
ng new ngBootstrapApp

The second command will create an Angular bootstrap project for us.

How to install bootstrap in angular ?

Before angular 9, installing bootstrap in angular, we manually need to add NgbModule from angular ng-bootstrap in app.module.ts file but this is not the case in angular 9 and above. We just run the command below only to install and configure bootstrap in angular.

ng add @ng-bootstrap/ng-bootstrap

The above command will install bootstrap and add NgbModule automatically in our app.module.ts file. We can use our ng-bootstrap component directly in our angular project without any further configuration like importing bootstrap CSS in our project.

Angular Bootstrap example

The ng-bootstrap allows us to use the bootstrap component in our angular project. The ng-bootstrap has a large number of premade components that are ready to use in our angular project. Let’s first use the table component from bootstrap. Here is a screenshot of our first Angular bootstrap example.

bootstrap in angular

We can use any of the ng-bootstrap components it provides to us. Let’s add some ng-bootstrap components. We will use a basic table and rating components. Edit the app.component.html template and typescript file

<p>Table is just a mapping of objects to table rows with <code>ngFor</code></p>

<table class="table table-striped">
  <thead>
  <tr>
    <th scope="col">#</th>
    <th scope="col">Country</th>
    <th scope="col">Area</th>
    <th scope="col">Population</th>
  </tr>
  </thead>
  <tbody>
  <tr *ngFor="let country of countries; index as i">
    <th scope="row">{{ i + 1 }}</th>
    <td>
      <img [src]="'https://upload.wikimedia.org/wikipedia/commons/' + country.flag" class="mr-2" style="width: 20px">
      {{ country.name }}
    </td>
    <td>{{ country.area | number }}</td>
    <td>{{ country.population | number }}</td>
  </tr>
  </tbody>
</table>

Here we have to define iterate through countries array object to display country data and image containing country flag. We haven’t added any CSS style for the table, all table styles, stripe line, and responsive are taken from bootstrap only.

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

interface Country {
  name: string;
  flag: string;
  area: number;
  population: number;
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  countries: Country[] = [
    {
      name: 'Russia',
      flag: 'f/f3/Flag_of_Russia.svg',
      area: 17075200,
      population: 146989754
    },
    {
      name: 'Canada',
      flag: 'c/cf/Flag_of_Canada.svg',
      area: 9976140,
      population: 36624199
    },
    {
      name: 'United States',
      flag: 'a/a4/Flag_of_the_United_States.svg',
      area: 9629091,
      population: 324459463
    },
  ];
}

If you want to learn how to add pagination on the table and filter using bootstrap, we had an article on it.

Angular bootstrap modal example

Let’s continue from the previous example, here we’ll demonstrate an example of Angular bootstrap modal to display country information in detail. Here is a screenshot of our Angular bootstrap modal.

Angular bootstrap modal

Let create a country medal for our countries data, create folder models, and add a file called the country.ts file and add the following code.

export interface Country {
    name: string;
    flag: string;
    area: number;
    population: number;
}

Let’s create a detail component which is our Angular bootstrap modal, where we are getting data from the app component and display in it. Run the command below to generate the Angular bootstrap modal component called detail.

ng generate component components/detail

Edit our Angular bootstrap modal component.

In our detail component modal, we are displaying details of each country. Let edit the components/detail.component.ts file.

import { Component, Input } from '@angular/core';
import { Country } from 'src/app/models/country';
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-detail',
  templateUrl: './detail.component.html',
  styleUrls: ['./detail.component.scss']
})
export class DetailComponent {
  @Input() country: Country;

  constructor(public activeModal: NgbActiveModal) { }

}

Here we need to import NgbActiveModal from ng-bootstrap, we need this to perform modal operations like the closing of the modal. We have to use the @Input decorator to get country data from the app.component.html file and let edit the detail.component.html template to display our country data.

<div class="modal-header">
    <h4 class="modal-title">Information: {{ country.name }}</h4>
    <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
        <span aria-hidden="true">&times;</span>
    </button>
</div>
<div class="modal-body">
    <div class="card country-border">
        <img class="card-img-top" [src]="'https://upload.wikimedia.org/wikipedia/commons/' + country.flag"
            alt="Card image cap">
        <div class="card-body">
            <p class="card-text"><b>Name : </b>{{ country.name }}</p>
            <p class="card-text"><b>Area : </b>{{ country.area }}</p>
            <p class="card-title"><b>Population : </b>{{ country.population }}</p>
        </div>
    </div>
</div>
<div class="modal-footer">
    <button type="button" class="btn btn-outline-dark" (click)="activeModal.close('Close click')">Close</button>
</div>

In our detail modal, we have two modals that allow us to dismiss or close the modal component.

Edit App component to pass data to Angular bootstrap modal

We need to edit our app.component.ts file to pass country data to our angular bootstrap modal detail component and we need to import our DetailComponent modal.

import { Component } from '@angular/core';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { DetailComponent } from './components/detail/detail.component';
import { Country } from './models/country';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  currentRate = 8;
  countries: Country[] = [
    {
      name: 'Russia',
      flag: 'f/f3/Flag_of_Russia.svg',
      area: 17075200,
      population: 146989754
    },
    {
      name: 'India',
      flag: "4/41/Flag_of_India.svg",
      area: 3287263,
      population: 1324171354
    },
    {
      name: 'Canada',
      flag: 'c/cf/Flag_of_Canada.svg',
      area: 9976140,
      population: 36624199
    },
    {
      name: 'United States',
      flag: 'a/a4/Flag_of_the_United_States.svg',
      area: 9629091,
      population: 324459463
    },
  ];

  constructor(private modalService: NgbModal) { }

  open(country: Country) {
    const modalRef = this.modalService.open(DetailComponent);
    modalRef.componentInstance.country = country;
  }
}

Edit app.component.html, as we need to add an edit button for each country in the countries list to pass data from the app component to our bootstrap modal.

<p>Table is just a mapping of objects to table rows with <code>ngFor</code></p>
<table class="table table-striped">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Country</th>
      <th scope="col">Area</th>
      <th scope="col">Population</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let country of countries; index as i">
      <th scope="row">{{ i + 1 }}</th>
      <td>
        <img [src]="'https://upload.wikimedia.org/wikipedia/commons/' + country.flag" class="mr-2" style="width: 20px">
        {{ country.name }}
      </td>
      <td>{{ country.area | number }}</td>
      <td>{{ country.population | number }}</td>
      <button type="button" c class="btn btn-info" (click)="open(country)">Country Details</button>
    </tr>
  </tbody>
</table>
<router-outlet></router-outlet>

Angular bootstrap carousel example

Last we’ll demonstrate how to use angular bootstrap carousel, as ng-bootstrap have a carousel component to implement it in our Angular, Here is a screenshot of our example of angular bootstrap carousel.

angular bootstrap carousel example

Let edit our component to add a carousel to our project.

<ngb-carousel *ngIf="images" class="text-lg-center">
  <ng-template ngbSlide>
    <div class="picsum-img-wrapper">
      <img [src]="images[0]" alt="Random first slide">
    </div>
    <div class="carousel-caption">
      <h3>First slide label</h3>
      <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
    </div>
  </ng-template>
  <ng-template ngbSlide>
    <div class="picsum-img-wrapper">
      <img [src]="images[1]" alt="Random second slide">
    </div>
    <div class="carousel-caption">
      <h3>Second slide label</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
  </ng-template>
  <ng-template ngbSlide>
    <div class="picsum-img-wrapper">
      <img [src]="images[2]" alt="Random third slide">
    </div>
    <div class="carousel-caption">
      <h3>Third slide label</h3>
      <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
    </div>
  </ng-template>
</ngb-carousel>

Add image array object in component typescript file as below.

  images = [944, 1011, 984].map((n) => `https://picsum.photos/id/${n}/900/500`);

Note: We need to add class=”text-lg-center” to the carousel component so we can make the ng-bootstrap carousel center.

Conclusion
Installing bootstrap in an Angular is easy and straight.  The ng-bootstrap in Angular widget is built only from Bootstrap 4 CSS with APIs designed for the Angular ecosystem. No dependencies on 3rd party JavaScript.

Bootstrap is a free and open-source CSS framework directed at responsive, mobile-first front-end web development. It contains CSS- and (optionally) JavaScript-based design templates for typography, forms, buttons, navigation, and other interface components.

Related Articles

Spread the love

1 thought on “How to install bootstrap in angular 12?”

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top