Angular 10 : tabs/navigation Example

Angular 10 : tabs/navigation

Angular Material tabs organize content into separate views where only one view can be visible at a time. Each tab's label is shown in the tab header and the active tab's label is designated with the animated ink bar. When the list of tab labels exceeds the width of the header, pagination controls appear to let the user scroll left and right across the labels.

The active tab may be set using the selectedIndex input or when the user selects one of the tab labels in the header.

Events

The selectedTabChange output event is emitted when the active tab changes.

The focusChange output event is emitted when the user puts focus on any of the tab labels in the header, usually through keyboard navigation.

HTML:

<mat-tab-group mat-align-tabs="start">
  <mat-tab label="First">Content 1</mat-tab>
  <mat-tab label="Second">Content 2</mat-tab>
  <mat-tab label="Third">Content 3</mat-tab>
</mat-tab-group>

<mat-tab-group mat-align-tabs="center">
  <mat-tab label="First">Content 1</mat-tab>
  <mat-tab label="Second">Content 2</mat-tab>
  <mat-tab label="Third">Content 3</mat-tab>
</mat-tab-group>

<mat-tab-group mat-align-tabs="end">
  <mat-tab label="First">Content 1</mat-tab>
  <mat-tab label="Second">Content 2</mat-tab>
  <mat-tab label="Third">Content 3</mat-tab>
</mat-tab-group>

TS/JavaScript:

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

/**
 * @title Tab group with aligned labels
 */
@Component({
  selector: 'tab-group-align-example',
  templateUrl: 'tab-group-align-example.html',
  styleUrls: ['tab-group-align-example.css'],
})
export class TabGroupAlignExample {}