AfterViewInit

Implement this interface to get notified when your component's view has been fully initialized.

Example

@Component(selector: 'child-cmp', template: '{{where}} child')
class ChildComponent {
  @Input()
  String where;
}
 
@Component(
  selector: 'parent-cmp',
  template: '<child-cmp where="view"></child-cmp>',
  directives: const [ChildComponent]
)
class ParentComponent implements AfterViewInit {
  @ViewChild(ChildComponent)
  ChildComponentviewChild;
 
  ParentComponent() {
    // viewChild is not initialized yet
    print(_message(viewChild));
  }
 
  @override
  ngAfterViewInit() {
    // viewChild is updated after the view has been initialized
    console.log('ngAfterViewInit: ' + _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);