Как я могу сосредоточиться на конкретной вкладке мат

Question

<mat-tab-group mat-stretch-tabs #tabGroup (focusChange)="tabChanged($event)" [selectedIndex]="0">
    <mat-tab label="DATOS EXPEDIENTE">
      <div class="example-large-box mat-elevation-z4">
        <app-informe-expediente></app-informe-expediente>
      </div>
    </mat-tab>
    <mat-tab label="DATOS ALTERACIÓN">
      <div class="example-large-box mat-elevation-z4">
        <app-informe-alteracion></app-informe-alteracion>
      </div>
    </mat-tab>
    <mat-tab label="DATOS INMUEBLES">
      <div class="example-large-box mat-elevation-z4">
        <app-informe-inmuebles></app-informe-inmuebles>
      </div>
    </mat-tab>
    <mat-tab label="FLUJO DE TRAMITACIÓN">
      <div class="example-large-box mat-elevation-z4">
        <app-informe-tramitacion></app-informe-tramitacion>
      </div>
    </mat-tab>
    <mat-tab label="DOCUMENTOS ASOCIADOS">
      <div class="example-large-box mat-elevation-z4">
        <app-informe-documentos></app-informe-documentos>
      </div>
    </mat-tab>
</mat-tab-group>      

Это мое mat-tab-group это зависит от браузера, поэтому он срабатывает каждый раз, когда я нажимаю кнопку "Отправить". Мне нужно знать, как получить первую вкладку с индексом 0, чтобы фокусироваться каждый раз, когда я нажимаю кнопку "Отправить".
Я знаю, что это связано с индексом и тому подобным, но я не знаю, я контролирую индексы с помощью MatTabChangeEvent.

Answer 1

Вы можете использовать двухстороннее связывание на selectedIndex отслеживать, какая вкладка выбрана, и установить selectedIndex до 0 при нажатии кнопки

шаблон

<mat-tab-group [(selectedIndex)]=selectedIndex>
  <mat-tab label="First"> Content 1 </mat-tab>
  <mat-tab label="Second"> Content 2 </mat-tab>
  <mat-tab label="Third"> Content 3 </mat-tab>
</mat-tab-group>

<button mat-raised-button (click)="selectedIndex = 0">
  Reset tab
</button>

Составная часть

@Component({
  selector: 'tab-group-basic-example',
  templateUrl: 'tab-group-basic-example.html'
})
export class TabGroupBasicExample {
  selectedIndex = 0;
}

Answer 2

Я пытаюсь с ::ng-deep.mat-tab-label-active и он работает, изменяя непрозрачность до 1.0 только для активной вкладки фокуса.

Вы можете использовать этот код:

      ::ng-deep.mat-tab-label-active{
    opacity: 1.0!important;
}