Quiero detener el cambio de MatTab hasta que se dé una confirmación. He usado MatDialog para confirmación. El problema es que, antes de hacer clic en "Sí", la pestaña ya está cambiada.

Por ejemplo, desde la pestaña de ingresos , hago clic en la pestaña de ajuste . Y antes de cambiar a esa pestaña, primero necesito mostrar la ventana emergente . Pero recibo la ventana emergente después de moverme a la pestaña de ajuste .

plantilla de componente:

 <mat-tab-group (click)="tabClick($event)"> <mat-tab *ngFor="let tab of tabs; let index = index" [label]="tab"> <app-spread></app-spread </mat-tab> </mat-tab-group>

componente ts (método de onClick):

 tabClick(clickEvent: any) { if (clickEvent.target.innerText != 'First') { this.confirm(); } } public async confirm() { const dialogRef = this.dialog.open(ConfirmationDialogComponent, { maxHeight: '200px', maxWidth: '767px', width: '360px', disableClose: true, data: { title: 'Confirmation Message', content: 'There are valid statements that are not Final. Set the statements as Final?' } }); const res = dialogRef.afterClosed().subscribe(result => { if (result === 1) { //TODO need to change the tab } else { //TODO no need to change the tab } }); }