Reputation: 902
So, i have a simple mat-group which looks like this:
<mat-tab-group
(selectedTabChange)="onTabSelect($event)"
[disableRipple]="true"
mat-align-tabs="start"
animationDuration="0ms"
[selectedIndex]="0"
#tabs
>
<mat-tab *ngFor="let setting of tabsAndFilters">
<ng-template mat-tab-label>{{ setting['tabname'] }} </ng-template>
<mat-tab-body>
<dispo-einsatzuebersicht-einsatzuebersicht-aktuell
[currentMonitorEinsatz]="currentMonitorEinsatz$ | async"
></dispo-einsatzuebersicht-einsatzuebersicht-aktuell>
</mat-tab-body>
</mat-tab>
<mat-tab disabled>
<ng-template mat-tab-label
><div [formGroup]="myGroup" class="ansicht-field-container">
<sh-ui-forms-mat-select-control
class="fng-input arbeitsplatz-field"
formControlName="ansicht"
[label]="'Ansicht'"
[options]="currentNutzerParameter$ | async"
[frozen]="form.disabled"
></sh-ui-forms-mat-select-control>
</div>
</ng-template>
</mat-tab>
</mat-tab-group>
Visually, this is the result:
I just added that single mat-tab at the end (which is also disabled). Since I added it, the whole mat-group is acting sus. The last tab is always selected at the beginning, even though the selectedIndex
is 0
and the tab is disabled
.
Once I click on another tab, and try to select the last tab again, its not possible anymore since it is disabled (which is right).
So I wonder why the last tab is always selected at the beginning and how to make the first tab selected again....Thanks for your help!
Upvotes: 0
Views: 58