Angular : How to skip disabled tabs for mat-tab with arrow-keys and Tab keys

127 views Asked by At

I am new to Angular

I have a code like below

<mat-tab-group disableRipple mat-stretch-tabs="false" (keydown)="myFunction($event)">
    <mat-tab label="label 1" [disabled]="IsDisabled">
        <div>
          <app-my-app1 *ngFor="some condition" ></app-my-app1>         
        </div>
    </mat-tab>
    <mat-tab label="lbel 2" [disabled]="IsDisabled">     
        <div class="tab-content-wrapper">
          <app-my-app2 *ngFor="some condition"></app-my-app2>        
        </div>
    </mat-tab>
    
    <mat-tab label="label 3" [disabled]="IsDisabled">
        <div>
          <app-my-app3 *ngIf="some condition"></app-my-app3>
        </div>      
    </mat-tab>
</mat-tab-group>

I want to do navigation with the arrow keys and Tab keys. But I am unable to skip disabled tabs with arrow keys.

How can I achieve that?

Thanks in advance!

0

There are 0 answers