Material-Angular

Material Angular Mat-tab 使用技巧

mat-tab 切换时如何刷新数据(只渲染当前tab)

1
2
3
4
5
6
7
8
<mat-tab-group>
<mat-tab label="A">
<ng-template matTabContent> Content of tab A </ng-template>
</mat-tab>
<mat-tab label="B">
<ng-template matTabContent> Content of tab B </ng-template>
</mat-tab>
</mat-tab-group>

自定义mat-tab label内容

1
2
3
4
5
6
7
<mat-tab-group>
<mat-tab>
<ng-template mat-tab-label>
<span [matBadge]="10" matBadgeOverlap="false" matBadgeColor="warn">自定义标题</span>
</ng-template>
</mat-tab>
</mat-tab-group>