Я использую содержимое мат-вкладки углового материала.
Мой код выглядит так -
<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-tab-group>
<mat-tab label = "First">
<button mat-button>Go to tab 2</button>
<button mat-button>Go to tab 3</button>
</mat-tab>
<mat-tab label = "Second">
<button mat-button>Go to tab 1</button>
</mat-tab>
<mat-tab label = "Third">
<button mat-button>Go to tab 1</button>
</mat-tab>
</mat-tab-group>
Как реализовать эту функциональность при нажатии на кнопки, она должна переходить на разные вкладки?
Мы можем использовать ссылку на шаблон группы вкладок, чтобы изменить выбранный индекс вкладки.
<mat-tab-group #tabGroup>
<mat-tab label = "First">
<button mat-button (click) = "tabGroup.selectedIndex=1">Go to tab 2</button>
<button mat-button (click) = "tabGroup.selectedIndex=2">Go to tab 3</button>
</mat-tab>
<mat-tab label = "Second">
<button mat-button (click) = "tabGroup.selectedIndex=0">Go to tab 1</button>
</mat-tab>
<mat-tab label = "Third">
<button mat-button (click) = "tabGroup.selectedIndex=0">Go to tab 1</button>
</mat-tab>
</mat-tab-group>
Посмотрите документы, там есть пример с другим изменением вкладки: material.angular.io/components/tabs/examples. Я считаю, что
<mat-tab-group [selectedIndex] = "YourValue" (selectedIndexChange)=YourFunction($event)
решает вашу проблему