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

[PavelTurk]

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

[crisbeto]

It doesn't work, because you're detaching the ChangeDetectorRef in the constructor which is going to disable change detection for the entire app.

[PavelTurk]

@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).

[crisbeto]

OnPush change detection is activated when you set changeDetection: ChangeDetectionStrategy.OnPush, but that doesn't mean that change detection will be disabled completely, otherwise nothing would ever happen in the app.

[PavelTurk]

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

[crisbeto]

That happens because the tooltip is listening to some events which will trigger change detection. Change detection in itself isn't slow (it's basically a bunch of === expressions), it's what your app does in response to it is what causes the slowdown. I'm closing the issue because the tooltip is working as expected.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}