Angular: Multiple matToolTips based on multiple conditions

Question

I have multiple conditions and toolTip text values which I'd like to apply to a single table value. Depending on the conditions, we'll say A, B, and C, we'd show a particular tooltip text. If multiple conditions apply we'd show either A & B, B & C, A & C, or A & B & C. I also only want to enable the toolTip if getScorerToolTipText return value is not equal to "". Is this possible with matTooltip?

<ng-container matColumnDef="totalRuns">
     <th mat-header-cell *matHeaderCellDef>Runs</th>
         <td mat-cell *matCellDef="let scorer"
             matTooltipPosition="right"
             matTooltip = "{{this.getScorerTooltipText(scorer)}}"
             [matTooltipDisabled]="this.isTooltipDisabled"
             [class.alert-red]="!this.isTooltipDisabled"> {{scorer.runTotals}}</td>
         <td mat-footer-cell *matFooterCellDef> {{this.scoreTotals}} </td>
 </ng-container>

Answer 1

If your getScorerTooltipText() method return in a specific case the value "" you can add a condition inside your [matTooltipDisabled] attribute with the comparaison of your return value :

<ng-container matColumnDef="totalRuns">
     <th mat-header-cell *matHeaderCellDef>Runs</th>
         <td mat-cell *matCellDef="let scorer"
             matTooltipPosition="right"
             matTooltip = "{{this.getScorerTooltipText(scorer)}}"
             [matTooltipDisabled]="this.isTooltipDisabled && getScorerTooltipText(scorer) === ''"
             [class.alert-red]="!this.isTooltipDisabled"> {{scorer.runTotals}}</td>
         <td mat-footer-cell *matFooterCellDef> {{this.scoreTotals}} </td>
 </ng-container>

Like that, the tooltip will be disabled when isTooltipDisabled is true and when getScorerTooltipText() return the value ""