add tootip in mat-tab if using ng-container

Question

I have issues to add tootip in mat-tab if I use ng-container.

<mat-tab-group>
    <mat-tab label="Users" >
        <ng-container *ngTemplateOutlet="users"></ng-container>
    </mat-tab>
    <mat-tab label="Cars">
        <ng-container *ngTemplateOutlet="cars"></ng-container>
    </mat-tab>
</mat-tab-group>
<ng-template #users>
    <div>many users</div>
</ng-template>
<ng-template #cars>
    <div>many cars</div>
</ng-template>

I tried Attach tooltip on mat-tab label . It is not working. The difference is that here I use ng-container .

Answer 1

You can't add tooltips to ng-container , because it renders as a comment . So you need to change ng-container to some div / span , or attach tooltip to the div inside your ng-template .

Answer 2

Figure it out by myself. I have to add an additional ng-template above ng-container .

<mat-tab-group>
    <mat-tab label="Users" >
        <ng-template mat-tab-label>
           <label matTooltip="See users">Users  
           </label>
        </ng-template>
        <ng-container *ngTemplateOutlet="users"></ng-container>
    </mat-tab>
    <mat-tab label="Cars">
        <ng-template mat-tab-label>
            <label matTooltip="See cars">Users  
            </label>
        </ng-template>
        <ng-container *ngTemplateOutlet="cars"></ng-container>
    </mat-tab>
</mat-tab-group>
<ng-template #users>
    <div>many users</div>
</ng-template>
<ng-template #cars>
    <div>many cars</div>
</ng-template>