Ionic 5 Tabs without Routing using Angular Bootstrap

Tabs can manage multiple data views in the same area. In this article, we will learn how to use the Bootstrap Tabset UI component with Ionic 4.

Create Ionic 4 Application

To start from scratch, create a new Ionic 4 Application by running following command and selecting a few options:

Install ng-bootstrap pacakge

After creating the Ionic 4 application with Angular, install the ng-bootstrap package and bootstrap itself to get its style

Configure Bootstrap in Ionic Application

To use the ng-bootstrap component in the view, we need to import the NgbModule in its module.

For example, here we are going to use Bootstrap tabs in Home Page, so we need to add NgbModule in its imports array:

Import bootstrap.css in the global.scss file as shown below:

 

Now you can easily add the ngb-tabset and ngb-tab component for Tabset in the home.page.html file:

In the home.page.ts file add the tab change event as shown below:

That’s it now you have a working tab without routing in the Ionic 4 view using ng-bootstrap which supports other UI components as well read more about tabset options here.

Leave a Reply

avatar
  Subscribe  
Notify of