Есть ли способ выделить нажатую мат-вкладку? Когда каждая вкладка мат создается динамически

Question

Я динамически показываю вкладки mat в пользовательском интерфейсе, число и данные которых изменяются по мере изменения их значений в серверной части. Они генерируются динамически. Щелчок по любому mat-tab вызывает функцию и передает ей идентификатор для продолжения. Я хочу определить вкладку мат, по которой щелкнули, и держать ее выделенной, пока пользователь не будет перенаправлен на другую страницу.

Я пробовал mat-tab:active{background-color: #333}, который не работал

    <mat-tab-group [selectedIndex]="Index" (selectedTabChange)="tabChanged($event)" style="width:100%" #Tabgroup>
          <div *ngFor="let item of items; let last = last;" class="button">
            <mat-tab>
              <ng-template mat-tab-label>
                <span class="XYZ" id="item.Id"
                  (click)="setmodule(item.Id)">{{item.Name}}</span>
              </ng-template>
            </mat-tab>
          </div>
    </mat-tab-group>

Нет сообщений об ошибках! Но требование не выполнено.

Answer 1

Вы должны сохранить идентификатор выбранной вкладки в переменной, а затем использовать ngClass следующим образом:

<mat-tab-group [selectedIndex]="Index" (selectedTabChange)="tabChanged($event)" style="width:100%" #Tabgroup>
      <div *ngFor="let item of items; let last = last;" class="button">
        <mat-tab [ngClass]="{'tab-selected': selectedTabId==item.id}">
          <ng-template mat-tab-label>
            <span class="XYZ" id="item.Id"
              (click)="setmodule(item.Id)">{{item.Name}}</span>
          </ng-template>
        </mat-tab>
      </div>
</mat-tab-group>

В ваших стилях:

.tab-selected
{
  background-color: #333;
  // Some styles
}