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();
  });
}