Use Bootstrap Tabs with Angular

In this step, we are going to learn about the use of Bootstrap Tab. We will use Angular to do this. We can use Bootstrap tabs by using various versions of Angular like Angular 6, 7, 8, 9, 10 and 11. If we don't have knowledge about ngx-bootstrap tabs, we are at the right palace. The following example will provide a simple way of learning ng Bootstrap tabs.

Bootstrap provides the facility of Ng Bootstrap. All the native angular directives of Bootstrap version 3 and 4 will be provided by the Ng Bootstrap, such as datepicker, tooltip, buttons, model, tabs, pagination, etc. We can easily use Bootstrap UI by using the Ng Bootstrap. In our below example, four types of tabs will be simply created, and after creation we can use it in our application. In order to use Bootstrap tabs, the step by step process is described as follows:

Step 1:

In this step, we are going to Create New App. The following command will be useful to create a new app like this:

ng new my-new-app

Step 2:

In this step, we are going to Install Bootstrap 4. Here, we will use the Bootstrap CSS to install the core package of Bootstrap. The following command will be useful to install it like this:

npm install bootstrap --save

After executing this command, we will add Bootstrap CSS, such as "node_modules/bootstrap/dist/css/bootstrap.min.css". Now we will use a file named angular.json and add it like this:

angular.json

Step 3:

In this step, we are going to Install Ng Bootstrap. Here, we will use the Bootstrap UI to install the package of Ng Bootstrap. The following command will be used to install it like this:

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

Step 4:

In this step, we are going to Import Module. Here, we will import the NgbModule. Now we will use a file named app.module.ts and import it like this:

src/app/app.module.ts

Step 5:

In this step, we are going to Update View File. Here, we will use our file named HTML and update it. We will use a file named app.component.html and add the following code into it. Now we will create four types of tabs of Bootstrap, which is described as follows:

src/app/app.component.html

Now our above code is ready to run. In order to run the above code, we will use the following command:

ng serve

When we run this command, the following output will be generated: