Angular 8/7 Bootstrap | Tabset Tutorial with Options by Example

In this tutorial, we will implement The Tabset UI component in Angular application using the ng-bootstrap package.

The ng-bootstrap package provides a number of UI components that are compatible with the latest versions of Angular. Bootstrap components are getting used for a long time by developers to add multi-device and screen support. So using ng-bootstrap components not only fasten the development process but also adds up responsive behavior to these components by default.

Let’s get started with Bootstrap Tabset component implementation. We will create a new Angular 8 application using the ng CLI tool the install ng-bootstrap package.

Here we go!

Create a new Angular Project

To create an Angular project we will use the Ng CLI tool. The current version is 8.3.6.

Run the following command in the terminal.

Install and Configure Bootstrap

To use bootstrap components in an Angular project, install the ng-bootstrap package by running below NPM command in terminal:

Update App Module for Bootstrap

After installation, open app.module.ts file to import NgbModule then add in the imports array as shown below:

Add Bootstrap Style to UI Components

The ng-bootstrap package only provides the functionally active components, but to add bootstrap style to them we need to install bootstrap package.

Run following NPM command to install bootstrap:

Now open styles.css file then add below import:

 

That’s it we are now ready with Bootstrap installation and configuration. Now we can use Bootstrap UI components in any component of our Angular application.

Use Bootstrap Tabset Components

To use Bootsrap Tabset component, we add ngb-tabset component as a tab wrapper and each tab is created by ngb-tab component as shown below:

These components are supported by input and output properties as discussed below.

Methods and Properties:

NgbTabset

The ngb-tabset is the main wrapper for Tabset tabs.

Input Properties

activeId: Id of the tab to be active/opened

destroyOnHide: Default is true. The non-visible tabs will be removed from DOM.

justify: The horizontal arrangement of tabs can have any of these types: "start" | "center" | "end" | "fill" | "justified"

orientation: The orientation of tabs can be set to "horizontal" | "vertical"

type: Style of tabs, can be "tabs" and "pills".

Output Properties

tabChange: Tab change event is emitted before tab change.

Methods

select: Tab can be selected by providing its id.

Above discussed properties and methods can be used as shown in the following example template:

The tabChange output property event can be handled in component by importing NgbTabChangeEvent to get tab properties as shown below:

NgbTab

The ngb-tab component is used to create a tab in Tabset.

Input Properties

disabled: Takes boolean value to enable or disable a specific tab.

id: Used to define an identifier for a tab.

title: String value for tab title.

HTML layout in Tab Title and Content

Custom HTML content can be added for Tab title and its content using ngbTabTitle and ngbTabContent component directive.

In each ngb-tab, we can place ng-template element with ngbTabTitle and ngbTabContent to custom content as shown below:

 

 

 

 

 

Thanks for visiting :) Let me know if you have some suggestions or feedback for this post in the comment section. Looking for any tutorial or demo on FreakyJolly, just drop me a message here

1
Leave a Reply

avatar
1 Comment threads
0 Thread replies
1 Followers
 
Most reacted comment
Hottest comment thread
1 Comment authors
Kevin Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
Kevin
Guest
Kevin

am a newbie in angular and Hey I really like the way you explain things Keep up