IonicMan
IonicMan

Reputation: 902

Angular: Last mat-tab is always selected

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:

enter image description here

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

Answers (0)

Related Questions