angularangular-materialmat-tabng-container

add tootip in mat-tab if using ng-container


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.


Solution

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