Bug: cdkObserveContent callback does not trigger change detection correctly

[jianliao]

Bug, feature request, or proposal:

Update a variable of component in the callback function of cdkObserveContent directive. The component template will not be updated. No debounce setting, it should not runoutsideAngular?

For example,
Template snippet:

<h2 (cdkObserveContent)="_onContentChange()">Here are some links to help you start: {{variable}} </h2>
<ul [class.has-bgColor]="_hasBgColor">
......
</ul>
<button (click)="_onToggleButtonClick2()">Touch Label</button>

Component snippet:

_hasBgColor = true;
variable = 1;

_onContentChange() {
  this._hasBgColor = !this._hasBgColor;
  this._changeDetectorRef.markForCheck();
}

_onToggleButtonClick2() {
  this.variable += 1;
}

What is the expected behavior?

CD should be triggered and template should be updated.

What is the current behavior?

What are the steps to reproduce?

I try it with stackblitz, but it has issue.

What is the use-case or motivation for changing an existing behavior?

I want to know what can or can't do in cdkObserveContent callback.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Is there anything else we should know?

[jelbourn]

Ha, @mmalerba literally just ran into this yesterday and we decided not to do anything about it unless someone filed an issue since it causes problems inside Google to make it emit inside the zone.

[mmalerba]

as a workaround you can inject the NgZone and do:

constructor(private _zone: NgZone, private _changeDetectorRef: ChangeDetectorRef) {}

_onContentChange() {
  this._zone.run(() => {
    this._hasBgColor = !this._hasBgColor;
    this._changeDetectorRef.markForCheck();
  });
}

[crisbeto]

Closing due to inactivity.

[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.}