detectChanges is not updating host binding with OnPush

I’m submitting a…

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

When using ControlValueAccessor interface and calling change detector detectChanges inside writeValue method, it is not updating host binding css class, but calling markForCheck does. Also it is important to notice that this doesn’t work only on first ngModel change, if I change it second time, then it is working fine.

In my example .has-value css class is not applied even if I call detectChanges.

  host: {
      '[class.has-value]': 'hasValue'
  },

  //...

  get hasValue() {
    return !!this.value;
  }

  writeValue(value) {
    console.log('writeValue', value);
    this.value = value;
    this._cd.detectChanges();

    // will work
    // this.cd.markForCheck();
  }

calling markForCheck will trigger view to update, but this is bad because:

1. detectChanges should update view in any way
2. using markForCheck in this case complicates unit testing because fixture.detectChanges should be called minimum two times because of markForCheck

Expected behavior

detectChanges should always update all bindings correctly

Minimal reproduction of the problem with instructions

https://stackblitz.com/edit/angular-host-binding-bug?file=app%2Fapp.component.ts

Environment

Angular version: 5.x.x

Browser:
- [x] Chrome (desktop) version XX
 

[david-garcia-garcia]

A workaround is to skip the current’s component ChangeDetector, this will give access to the first ancestor (in this case the host component):

  constructor(@SkipSelf() protected cdRef: ChangeDetectorRef) {

[alexzuza]

As far i know that’s by desing in Renderer2.

Calling detectChanges does not have any effect because host bindings are part of parent view. Hi view doesn’t contain expression for updating class.has-value in your example Angular will update it during executing updateRenderer function for parent view.