src/app/materials/tabs/tabs.component.ts
| selector | app-tabs |
| styleUrls | ./tabs.component.scss |
| templateUrl | ./tabs.component.html |
Properties |
Methods |
constructor()
|
|
Defined in src/app/materials/tabs/tabs.component.ts:12
|
| ngOnInit |
ngOnInit()
|
|
Defined in src/app/materials/tabs/tabs.component.ts:16
|
|
Returns :
void
|
| 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() {}
}
<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>
./tabs.component.scss
mat-card {
margin: 24px;
}