bug(matTooltip): tooltip doesn't work with ChangeDetectionStrategy.OnPush

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

I have a table with tooltips inside rows:

 <ng-container matColumnDef="icons">
    <th mat-header-cell *matHeaderCellDef>#</th>
    <td mat-cell *matCellDef="let element">
      <span [matTooltip]="'Hello, world'" matTooltipPosition="below"
        >tooltip</span>
    </td>
  </ng-container>

The table can have thousands of rows, that’s why I have to use ChangeDetectionStrategy.OnPush. However, with such strategy tooltips are shown without text.

Reproduction

StackBlitz demo is here

Expected Behavior

Tooltips must be shown with text.

Actual Behavior

Tooltips are shown without text

Environment

• Angular: 13.3.9
• CDK/Material: 13.3.7
• Browser(s): FF 95
• Operating System (e.g. Windows, macOS, Ubuntu): Ubuntu

[PavelTurkish]

@crisbeto Thank you very much for your explanation. This is a modified version of the demo with three modifications:

• detach() is commented
• added fooTest getter in .ts {console.log('change was checked'); return true;}
• added {{fooTest}} in .html

With these modifications when you move mouse over tooltip you see in console change was checked. So, when we don’t call datach() method in constructor angular continues to check view/model. And when I have thousands of rows and any event is processed (keypress, mouse wheel etc) I see serious performance problems although nor view nor model has been changed.

[PavelTurkish]

@crisbeto I detach it because I use onPush strategy. If I don’t call this._changeDetectorRef.detach(); then angular doesn’t work in onPush mode (as I understand and as I tested - I am NOT experienced angular user).