Working with Bootstrap components in Angular

Bootstrap 4 contains many different JavaScript-dependent components. Many of these components rely on jQuery for Document Object Model (DOM) manipulation and can adversely interact with Angular's own View Encapsulation based data-binding. We will solve this issue using the Angular-friendly versions of these components provided by the ng-bootstrap project.

Getting ready

Let's add an accordion component to our web application, so we can group blog posts by their author. When the user clicks on the author's name, they will see a list of blog posts they created.

In order to build this functionality, we will need to install and save the ng-bootstrap project as a dependency via NPM:

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

How to do it...

Let's follow the steps to add a Bootstrap accordion component to our application:

1. First, we will import ng-bootstrap as a module into /src/app/app.module.ts:

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