Angular Bootstrap tabs

Tabs available in MDB share general markup and styles, from the base, .nav class to the active and disabled states.

If you are using navs to provide a navigation bar, be sure to add a role="navigation" to the most logical parent container of the <ul>, or wrap a <nav> element around the whole navigation. Do not add the role to the <ul> itself, as this would prevent it from being announced as an actual list by assistive technologies.

Basic examples MDB Pro component

Usage via data attributes

You can activate a tab or pill navigation without writing any JavaScript by simply specifying data-toggle="tab" or data-toggle="pill" on an element. Use these data attributes on .nav-tabs or .nav-pills.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.

                           
<!-- Nav Tabs -->
<mdb-tabset #staticTabs [buttonClass]="'nav-tabs tabs-3'" [contentClass]="'card'">
    <!--Panel 1-->
    <mdb-tab heading="Profile">
        <div class="row">
            <div class="col-12">
                <br>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
            </div>
        </div>
    </mdb-tab>
    <!--Panel 2-->
    <mdb-tab heading="Follow">
        <div class="row">
            <div class="col-12">
                <br>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
            </div>
        </div>
    </mdb-tab>
    <!--Panel 3-->
    <mdb-tab heading="Contact">
        <div class="row">
            <div class="col-12">
                <br>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
            </div>
        </div>
    </mdb-tab>
</mdb-tabset>

                            
<!-- Nav tabs -->
<mdb-tabset #staticTabs [buttonClass]="'nav-tabs tabs-3 indigo'" [contentClass]="''">
    <!--Panel 1-->
    <mdb-tab heading="<i class='fa fa-user'></i> Profile">
        <div class="row">
            <div class="col-12">
                <br>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
            </div>
        </div>
    </mdb-tab>
    <!--Panel 2-->
    <mdb-tab heading="<i class='fa fa-heart'></i> Follow">
        <div class="row">
            <div class="col-12">
                <br>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
            </div>
        </div>
    </mdb-tab>
    <!--Panel 3-->
    <mdb-tab heading="<i class='fa fa-envelope'></i> Mail">
        <div class="row">
            <div class="col-12">
                <br>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
            </div>
        </div>
    </mdb-tab>
</mdb-tabset>

Active
Link
Link
Help

                            
<!-- Nav tabs -->
<mdb-tabset #staticTabs [buttonClass]="'nav-tabs tabs-4 pills-secondary white margin'" [contentClass]="''">
    <!--Panel 1-->
    <mdb-tab heading="Profile">
        <div class="row">
            <div class="col-12">
                <br>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
            </div>
        </div>
    </mdb-tab>
    <!--Panel 2-->
    <mdb-tab heading="Follow">
        <div class="row">
            <div class="col-12">
                <br>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
            </div>
        </div>
    </mdb-tab>
    <!--Panel 3-->
    <mdb-tab heading="Mail">
        <div class="row">
            <div class="col-12">
                <br>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
            </div>
        </div>
    </mdb-tab>
    <!--Panel 4-->
    <mdb-tab heading="Help">
        <div class="row">
            <div class="col-12">
                <br>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
            </div>
        </div>
    </mdb-tab>
</mdb-tabset>

Classic tabs MDB Pro component

For users who missed for classic Material Design tabs, we created fresh new version of tabs

                
<!-- Nav tabs -->
<mdb-tabset [buttonClass]="'classic-tabs tabs-cyan'" [contentClass]="'card'" class="classic-tabs">
    <!--Panel 1-->
    <mdb-tab heading="Profile">
        <div class="row">
            <div class="col-12">
                <br>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
            </div>
        </div>
    </mdb-tab>
    <!--Panel 2-->
    <mdb-tab heading="Follow">
        <div class="row">
            <div class="col-12">
                <br>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
            </div>
        </div>
    </mdb-tab>
    <!--Panel 3-->
    <mdb-tab heading="Contact">
        <div class="row">
            <div class="col-12">
                <br>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
            </div>
        </div>
    </mdb-tab>
    <mdb-tab heading="Be awesome">
        <div class="row">
            <div class="col-12">
                <br>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
            </div>
        </div>
    </mdb-tab>
</mdb-tabset>

                            
<!-- Nav tabs -->
<mdb-tabset [buttonClass]="'classic-tabs tabs-orange'" [contentClass]="'card'" class="classic-tabs">
    <!--Panel 1-->
    <mdb-tab heading="<i class='fa fa-user fa-2x'></i><br>Profile">
        <div class="row">
            <div class="col-12">
                <br>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
            </div>
        </div>
    </mdb-tab>
    <!--Panel 2-->
    <mdb-tab heading="<i class='fa fa-heart fa-2x'></i><br>Follow">
        <div class="row">
            <div class="col-12">
                <br>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
            </div>
        </div>
    </mdb-tab>
    <!--Panel 3-->
    <mdb-tab heading="<i class='fa fa-envelope fa-2x'></i><br>Contact">
        <div class="row">
            <div class="col-12">
                <br>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
            </div>
        </div>
    </mdb-tab>
    <mdb-tab heading="<i class='fa fa-star fa-2x'></i><br>Be awesome">
        <div class="row">
            <div class="col-12">
                <br>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
            </div>
        </div>
    </mdb-tab>
</mdb-tabset>

Events

Event Type	Description
(showBsTab)="show($event)"	This event fires on tab show, but before the new tab has been shown.
(shownBsTab)="shown($event)"	This event fires on tab show after a tab has been shown.
(hideBsTab)="hide($event)"	This event fires when a new tab is to be shown (and thus the previous active tab is to be hidden).
(hiddenBsTab)="hidden($event)"	This event fires after a new tab is shown (and thus the previous active tab is hidden).




    
    
        
            
                

                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.
            
        
    
    
    
        
            
                

                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.
            
        
    
    
    
        
            
                

                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.


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

@Component({
  selector: 'tabs-component-example',
  templateUrl: 'tabs.component.html',
})

export class TabsComponent  {
    @ViewChild('staticTabs') public staticTabs;

    selectProfileTab() {
        this.staticTabs.setActiveTab(1);
    }

    selectFollowTab() {
        this.staticTabs.setActiveTab(2);
    }
    shown(event) { console.log('shown') }
    show(event) { console.log('show') }
    hide(event) { console.log('hide') }
    hidden(event) { console.log('hidden') }

}

API Reference:

In order to speed up your application, you can choose to import only the modules you actually need, instead of importing the entire MDB Angular library. Remember that importing the entire library, and immediately afterwards a specific module, is bad practice, and can cause application errors.

API Reference for MDB Angular Tabs & Pills:

// For MDB Angular Pro
import { TabsModule, WavesModule } from 'ng-uikit-pro-standard'

Import example Modules list