Tengo un componente de pestaña de materiales angulares y me gustaría aplicar un comportamiento visual especial cuando la pestaña se enfoca (normalmente usando la pestaña).

En particular, me gustaría eliminar la línea del botón en la pestaña como en la siguiente imagen cuando la pestaña está enfocada y agregarla cuando está fuera de foco.

Me doy cuenta de que la clase css para eliminar la línea de tabulación es .mat-ink-bar y debería ser algo similar a esto.

 mat-tab-group { mat-ink-bar.mat-ink-bar { display: none; } }

Estoy detectando el evento de enfoque en CSS usando este css:

 .mat-tab-label { &:focus { background-color: transparent !important; color: red !important; } }

Y finalmente, el html generado a partir del componente de materiales angulares (o al menos una parte importante) es

 <mat-tab-group class="mat-tab-group mat-primary ng-star-inserted"> <mat-tab-header class="mat-tab-header"> <div class="mat-tab-label-container"> <div class="mat-tab-list" role="tablist" style="transform: translateX(0px);"> <div class="mat-tab-labels"> <div cdkmonitorelementfocus="" class="mat-tab-label mat-focus-indicator mat-ripple mat-tab-label-active"> <div class="mat-tab-label-content">General</div> </div> </div> <mat-ink-bar class="mat-ink-bar" style="visibility: visible; left: 0px; width: 160px;"></mat-ink-bar> </div> </div> </mat-tab-header> </mat-tab-group>

El problema es que no encuentro una manera de relacionar ambas clases para aplicar el comportamiento (agregar/eliminar mat-ink-bar) ya que ambos div no están directamente relacionados y parece que el comportamiento no es posible en CSS .

Intento hacerlo en el lado angular para agregar una clase css en mat-ink-bar div (y aplicar el estilo correcto para esa nueva clase css) pero cuando agregué un oyente para detectar el foco, este evento no se detecta para pestaña (se activa para otros elementos de entrada pero no para la pestaña)

 @HostListener('focusin', ['$event']) public onFocus(event:any) { console.log(event); }

¿Alguna solución?