I've a tab component from angular materials and I'd like to apply a special visual behavior when the tab gain focus (typically by using tab).

In particular, I'd like to remove the button line on tab as in the following image when the tab is focus and add it when focus out.

I realize that the css class to remove the tab line is the .mat-ink-bar and it should be something similar to this.

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

I'm detecting the focus event on CSS using this css:

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

And finally the generated html from the angular materials component (or at least important part) is

<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>    

The issue is that I don't find a way to relate both class in order to apply the behavior (add/remove mat-ink-bar) since both div are not directly related and it seems that behavior is not possible to it on CSS.

I try to do it on angular side in order to add a css class on mat-ink-bar div (and apply the right style for that new css class) but when I added a listener to detect the focus this event is not detected for tab (it's triggered for others input elements but not for tab)

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

Any solution?