Seeking advice on how to dynamically switch content within tabs without affecting the header that remains constant across all tabs. I currently have a panel with tabs and a container for content. The goal is to use the selectedTabChange event listener to determine which tab is active and display the corresponding div accordingly. Any suggestions on what should be included in the selectedTabChange function?
.html:
<mat-tab label="first"></mat-tab>
<mat-tab label="second"></mat-tab>
<mat-tab label="third"></mat-tab>
</mat-tab-group>
<div class="container">
<div class="header">Header</div>
<div *ngIf="isBlock2! && !isBlock3" class="block1">Text</div>
<div *ngIf="isBlock1! && !isBlock3" class="block2">Text</div>
<div *ngIf="isBlock1! && !isBlock2" class="block3">Text</div>
</div>
.ts:
public isBlock2 = false;
public isBlock3 = false;
changeTabs(event) : void {
isBlock1 != isBlock1;
}