AfterViewChecked

Implement this interface to get notified after every check of your component's view.

Example

@Component(selector: 'child-cmp', template: '{{where}} child')
class ChildComponent {
  @Input()
  String where;
}
 
@Component(
  selector: 'parent-cmp',
  template: '''
    <button (click)="showView = !showView">Toggle view child</button>
    <child-cmp *ngIf="showView" where="view"></child-cmp>
  ''',
  directives: const [NgIf, ChildComponent]
)
class ParentComponent implements AfterViewChecked {
  @ViewChild(ChildComponent)
  ChildComponent viewChild;
 
  bool showView = true;
 
  ParentComponent() {
    // viewChild is not initialized yet
    print(_message(viewChild));
  }
 
  @override
  ngAfterViewChecked() {
    // viewChild is updated after the view has been checked
    print('AfterViewChecked: ${_message(viewChild)}');
  }
 
  String _message(cmp: ChildComponent) =>
      cmp  == null ? 'no child' : '${cmp.where} child';
}
 
@Component(
  selector: 'app',
  template: '<parent-cmp></parent-cmp>',
  directives: const [ParentComponent]
)
export class App {}
 
bootstrap(App);