3

I am using the OnPush strategy and according to this article if no inputs change, there is no need to check the component’s template. But in my example when I am clicking the trigger button and the inputs does not change in this case the ngAfterViewChecked hook still running. What am I missing?

import {Component, NgModule, Input, ChangeDetectionStrategy} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'

@Component({
  selector: 'cmp',
  template: `
    <h1>{{data.name}}</h1>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class Cmp {
  @Input() data;

  ngOnChanges() {
    console.log('ngOnChanges');
  }

  ngAfterViewChecked() {
    console.log('view checked');
  }
}

@Component({
  selector: 'my-app',
  template: `
    <div>
      <cmp [data]="data"></cmp>
      <button (click)="trigger()">trigger</button>
      <button (click)="change()">Change</button>
    </div>
  `,
})
export class App {
  constructor() {
    this.data = {
      name: 'Angular'
    }
  }

  trigger() {

  }

  change() {
    this.data = {
      name: 'Angular2'
    };
  }
}

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App, Cmp ],
  bootstrap: [ App ]
})
export class AppModule {}
  • See also http://stackoverflow.com/questions/40300635/angular-2-runoutsideangular-still-change-the-ui/40301972#40301972 – yurzui Dec 18 '16 at 14:29

1 Answers1

2

You're not missing anything. Your expectations about ngAfterViewChecked are right and it's not called for subtree components when the parent changeDetectionStrategy is OnPush.

There is currently an issue opened on Github and it seems that triggering the lifecycle callback is not the only problem because some checks are actually made.

Jiayi Hu
  • 2,210
  • 1
  • 14
  • 12