AfterContentInit

Implement this interface to get notified when your directive's content has been fully initialized.

Example

@Component(
  selector: 'child-cmp',
  template: '{{where}} child'
)
class ChildComponent {
  @Input()
  String where;
}
 
@Component(
  selector: 'parent-cmp',
  template: '<ng-content></ng-content>'
)
class ParentComponent implements AfterContentInit {
  @ContentChild(ChildComponent)
  ChildComponent contentChild;;
 
  ParentComponent() {
    // contentChild is not initialized yet
    print(_message(contentChild));
  }
 
  @override
  ngAfterContentInit() {
    // contentChild is updated after the content has been checked
    console.log('AfterContentInit: ' + _message(contentChild));
  }
 
  String _message(ChildComponent cmp) =>
      cmp == null ? 'no child' : '${cmp.where} child';
}
 
@Component(
  selector: 'app',
  template: '''
    <parent-cmp>
      <child-cmp where="content"></child-cmp>
    </parent-cmp>
  ''',
  directives: const [ParentComponent, ChildComponent]
)
export class App {}
 
bootstrap(App);