Angular Bootstrap Navigation/Tab pills

Tab navigation with Bootstrap, ngSwitch and Material

Prerequisites:

bootstrap v4.3.1
@angular/material v8.2.3

1. Component - HTML

<div class="tab-page">
    <div fxLayout="row" fxLayoutAlign="center start">
        <div>
            <ul class="nav nav-pills">
                <li><a [class.nav-link]="true" [class.active]="viewMode=='tab1'" (click)="viewMode='tab1'">Tab-1</a></li>
                <li><a [class.nav-link]="true" [class.active]="viewMode=='tab2'" (click)="viewMode='tab2'">Tab-2</a></li>
                <li><a [class.nav-link]="true" [class.active]="viewMode=='tab3'" (click)="viewMode='tab3'">Tab-3</a></li>
            </ul>

            <mat-divider></mat-divider>

            <div [ngSwitch]="viewMode">
                <div *ngSwitchCase="'tab1'"> Tab 1 content...</div>
                <div *ngSwitchCase="'tab2'"> Tab 2 content...</div>
                <div *ngSwitchCase="'tab3'"> Tab 3 content...</div>
            </div>
        </div>
    </div>


</div>

2. Component - TS

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

@Component({

  selector: 'tabs-page',

  templateUrl: './tabs-page.component.html',

  styleUrls: ['./tabs-page.component.scss']

})

export class TabsPageComponent implements OnInit {

  viewMode: string;

  constructor() { }

  ngOnInit() {

  }

}

3. Component - CSS

.nav-pills {

  font-size: 30px;

}

.tab-page{

  height: 500px;

}