angular-material-app documentation
  1. Components
  2. TabsComponent

File

src/app/materials/tabs/tabs.component.ts

Implements

OnInit

Metadata

selector app-tabs
styleUrls ./tabs.component.scss
templateUrl ./tabs.component.html

Index

Properties
Methods

Constructor

constructor()
Defined in src/app/materials/tabs/tabs.component.ts:12

Methods

ngOnInit
ngOnInit()
Defined in src/app/materials/tabs/tabs.component.ts:16
Returns : void

Properties

navLinks
Type : []
Default value : [ { label: 'test1', path: '/materials/tabs' }, { label: 'test2', path: '/materials/tabs' } ]
Defined in src/app/materials/tabs/tabs.component.ts:9
 
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-tabs',
  templateUrl: './tabs.component.html',
  styleUrls: ['./tabs.component.scss']
})
export class TabsComponent implements OnInit {
  navLinks = [
    { label: 'test1', path: '/materials/tabs' },
    { label: 'test2', path: '/materials/tabs' }
  ];

  constructor() {}

  ngOnInit() {}
}
Copy
<mat-card>
  <mat-card-title>Basic tabs</mat-card-title>
  <mat-card-content>
    <mat-tab-group>
      <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-card-content>
</mat-card>

<mat-card>
  <mat-card-title>Labels tabs</mat-card-title>
  <mat-card-content>
    <mat-tab-group>
      <mat-tab>
        <ng-template mat-tab-label>
          The
          <em>best</em> pasta
        </ng-template>
        <h1>Best pasta restaurants</h1>
        <p>...</p>
      </mat-tab>
      <mat-tab>
        <ng-template mat-tab-label>
          <mat-icon>thumb_down</mat-icon> The worst sushi
        </ng-template>
        <h1>Terrible sushi restaurants</h1>
        <p>...</p>
      </mat-tab>
    </mat-tab-group>
  </mat-card-content>
</mat-card>

<mat-card>
  <mat-card-title>Tabs and navigation</mat-card-title>
  <mat-card-content>
    <nav mat-tab-nav-bar>
      <a mat-tab-link *ngFor="let link of navLinks" [routerLink]="link.path" routerLinkActive #rla="routerLinkActive" [active]="rla.isActive">
        {{link.label}}
      </a>
    </nav>
    <router-outlet></router-outlet>
  </mat-card-content>
</mat-card>

<mat-card>
  <mat-card-title>Lazy Loading tabs</mat-card-title>
  <mat-card-content>
    <mat-tab-group>
      <mat-tab label="First">
        <ng-template matTabContent>
          The First Content
        </ng-template>
      </mat-tab>
      <mat-tab label="Second">
        <ng-template matTabContent>
          The Second Content
        </ng-template>
      </mat-tab>
    </mat-tab-group>
  </mat-card-content>
</mat-card>
Copy

./tabs.component.scss 

mat-card {
  margin: 24px;
}
Copy
Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""