Angular Basics: How to Install and Use Bootstrap in Angular

Learn how to install and use Bootstrap in your Angular applications.

To make building Angular web apps even easier, we often use pre-built components to build the frontend.

Bootstrap provides many user interface components that let us create good-looking interactive frontends with ease. Libraries are made to create Angular components based on the Bootstrap framework.

In this article, we will look at how to install and use Bootstrap in Angular.

Installing ng-bootstrap

We can use the ng-bootstrap library to add Bootstrap components into our Angular apps.

It created Angular components based on the vanilla version of the Bootstrap framework to let us add Bootstrap components that are ready to be used within our Angular projects.

To install it, we run:

ng add @ng-bootstrap/ng-bootstrap

The ng add command comes with Angular CLI so we can use it with most Angular projects.

Running this will add all the required dependencies to our Angular modules automatically so we can use the provided components immediately.

The latest version of ng-bootstrap is based on the latest version of Bootstrap.

Once it runs, we should get something like:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

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

in app.module.ts.

NgbModule is added by ng-bootstrap, and adding this to imports lets us use the components provided by it.

Now we can add some components.

Adding Common Components

Now that ng-bootstrap is installed and included in our Angular app module, we can use the components provided.

Alert

We can add an alert box easily. To do this, we just use the ngb-alert component.

For instance, we write:

<ngb-alert [dismissible]="true">
  <strong>Warning!</strong> This area is restricted and dangerous. Please do not
  enter without proper authorization and equipment
</ngb-alert>

to add an alert box with the ngb-alert component.

We make make it dismissible or not with the dismissible prop

Date Picker

We can add a date picker easily with ng-bootstrap. To do this, we add the ngbDatepicker attribute to an input element. And we bind the date value selected with ngModel.

To do this, we write:

app.module.ts

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

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

to add the FormsModule.

Next, in app.component.ts, we write:

import { Component } from '@angular/core';
import { NgbDate } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  date: NgbDate = new NgbDate(2023, 1, 14);

  onDateSelect(date: NgbDate) {
    this.date = date;
  }
}

to add the date field to AppComponent.

The date value that results from selecting a date value is of type NgbDate rather than a native JavaScript date.

Then we write:

app.component.html

<input
  type="text"
  ngbDatepicker
  (dateSelect)="onDateSelect($event)"
  [(ngModel)]="date"
  #d="ngbDatepicker"
/>
<button (click)="d.toggle()">Toggle</button>

to add a handler for the dateSelect event, which lets us get the selected date from the $event variable.

This is passed into the onDateSelect method in AppComponent and the parameter is of type NgbDate.

We then bind the selected date value to the date value with ngModel. We can use ngModel to bind the input value to date because we add the FormModule in the imports array in app.module.ts.

We add ngbDatepicker to make the input show the date picker when we call toggle.

And we add #d="ngbDatepicker" to assign the date picker to template variable d so we can call d.toggle when the button is clicked to open the date picker.

As a result, we should see the date value when the page loads.

When we click Toggle, we see the date picker popup. And when we select a date from the date picker, we see the new date value in the input.

Modal

ng-bootstrap also comes with a modal component.

To add it, we write:

app.component.ts

import { Component, TemplateRef } from '@angular/core';
import { NgbModal, NgbModalConfig } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [NgbModalConfig, NgbModal],
})
export class AppComponent {
  constructor(config: NgbModalConfig, private modalService: NgbModal) {
    config.backdrop = 'static';
    config.keyboard = false;
  }

  open(content: TemplateRef<any>) {
    this.modalService.open(content);
  }
}

We inject the config in the constructor so we can set some options for it like setting the backdrop and letting us control the modal with the keyboard.

The open method opens the modal with this.modalService.open.

Next, we add:

app.component.html

<ng-template #content let-c="close" let-d="dismiss">
  <div class="modal-header">
    <h4 class="modal-title" id="modal-basic-title">Hi there!</h4>
    <button
      type="button"
      class="btn-close"
      aria-label="Close"
      (click)="d('Close click')"
    ></button>
  </div>
  <div class="modal-body">
    <p>Hello! How can I assist you today?</p>
  </div>
  <div class="modal-footer">
    <button
      type="button"
      class="btn btn-outline-dark"
      (click)="c('Close click')"
    >
      Close
    </button>
  </div>
</ng-template>

<button class="btn btn-lg btn-outline-primary" (click)="open(content)">
  Launch modal
</button>

to add the modal by using the ng-template component. We set d to the dismiss function and call it when we click the buttons so we can close the modal with the button.

Table

We can add tables easily with ng-bootstrap. We just use vanilla Bootstrap classes to style the tables with the Bootstrap styles.

For instance, we write:

app.component.ts

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

interface City {
  id: number;
  name: string;
  population: number;
}

const CITIES: City[] = [
  {
    id: 1,
    name: 'Tokyo',
    population: 37_393_000,
  },
  {
    id: 2,
    name: 'Delhi',
    population: 30_290_000,
  },
  {
    id: 3,
    name: 'Shanghai',
    population: 27_058_000,
  },
];

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  cities: City[] = CITIES;
}

to add some data for the table by defining the cities array.

Then we write:

app.component.html

<table class="table table-striped">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Country</th>
      <th scope="col">Population</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let c of cities">
      <td scope="row">{{ c.id }}</td>
      <td>{{ c.name }}</td>
      <td>{{ c.population | number }}</td>
    </tr>
  </tbody>
</table>

to add the table. We just use the table class to style the HTML table element into a Bootstrap style table. And we use the table-striped class to change the color of every second row.

Text Inputs and Dropdowns

ng-bootstrap doesn’t provide its own components for common form inputs. Therefore, we add the inputs with the vanilla Bootstrap library, which ng-bootstrap comes with.

To do this, we write:

app.module.ts

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule } from "@angular/forms";

import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";
import { NgbModule } from "@ng-bootstrap/ng-bootstrap";

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

to add the FormsModule so we can bind the input values to variables with ngModel.

Next, we write:

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  inputValues = { email: '', text: '', dropDownChoice: '' };

  onSubmit(form: NgForm) {
    console.log(form.value);
  }
}

to add the inputValues variable which we bind the input values to. And we add the onSubmit function that gets the form and log its value.

Next, we write:

<form (ngSubmit)="onSubmit(f)" #f="ngForm">
  <div class="my-1">
    <label for="exampleFormControlInput1" class="form-label"
      >Email address</label
    >
    <input
      type="email"
      class="form-control"
      id="exampleFormControlInput1"
      name="email"
      placeholder="name@example.com"
      [(ngModel)]="inputValues.email"
    />
  </div>

  <div class="my-1">
    <label for="exampleFormControlTextarea1" class="form-label"
      >Example textarea</label
    >
    <textarea
      class="form-control"
      id="exampleFormControlTextarea1"
      rows="3"
      name="text"
      [(ngModel)]="inputValues.text"
    ></textarea>
  </div>

  <div class="my-1">
    <select
      class="form-select"
      aria-label="Default select example"
      name="dropDownChoice"
      [(ngModel)]="inputValues.dropDownChoice"
    >
      <option>Open this select menu</option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </select>
  </div>

  <div class="my-1">
    <button type="submit" class="btn btn-primary">Submit</button>
  </div>
</form>

to add the form controls with Bootstrap styles.

We use the my-1 class to add some vertical margins. btn and btn-primary let us style the button into the default Bootstrap style.

The form-label class lets us style the input labels with Bootstrap styles. The form-control class styles the form inputs into Bootstrap style form inputs.

In the form element, we use the onSubmit method as the submit event handler. f is an NgForm object which we pass into the form to get its value. And ngModel binds the form input values to the properties of the inputValues object.

Bootstrap Theming

We can use a custom theme to change global styles. Bootstrap provides us CSS variables that we can change.

For instance, we write:

style.css

.alert-warning {
  --bs-alert-color: blue;
  --bs-alert-bg: orange;
  --bs-alert-border-color: orange;
}

to change the colors for the warning alert which has the alert-warning class.

We set the --bs-alert-color CSS variable to set the alert text color. --bs-alert-bg sets the alert background color. And --bs-alert-border-color sets the alert border color.

Since the CSS code is in style.css, it will be applied everywhere.

Next, we add:

app.component.html

<ngb-alert [dismissible]="false">
  <strong>Warning!</strong>
</ngb-alert>

to add a warning alert box with the ngb-alert component. As a result, we see that the alert box has an orange background and blue text.

We can also change the primary color easily. To do this, we can set the --bs-primary CSS variable.

style.css

:root {
  --bs-primary: green;
}

.btn-primary {
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-active-border-color: var(--bs-primary);
}

We set --bs-primary to green to change the primary theme color to green.

And then to style buttons with the btn-primary class, we set the variables that it uses to --bs-primary to set the color value it returns.

Then we write:

app.component.html

<button type="button" class="btn btn-primary">Primary</button>

to add a button with the primary colors changed.

We changed the background and border colors, so the button should have a green background and border.

Conclusion

Bootstrap provides many user interface components that let us create nice-looking interactive front ends with ease. ng-bootstrap provides us with components that help us develop Angular projects even more easily with Bootstrap styles.

The examples above are for Bootstrap 5. We can apply the same principles for Bootstrap 4. All we have to do is to change the CSS variable names to the ones used in Bootstrap 4. Both Bootstrap versions also support setting theme colors by setting Sass variables.

See https://getbootstrap.com/docs/5.0/customize/css-variables/ on how to theme Bootstrap 5 apps. For theming Bootstrap 4 apps, we can follow https://getbootstrap.com/docs/4.6/getting-started/theming/.

Also, Progress Kendo UI for Angular supports bootstrap and has a pre-built Bootstrap theme that can be customized with the ThemeBuilder tool. This makes it easy to start an app, select all the professionally designed components you need, and style everything in one place with ease—based on the Bootstrap theme, completely customized or somewhere between the two. Take a look and try it for free.