AfterContentChecked

Implement this interface to get notified after every check of your directive's content.

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 AfterContentChecked {
  @ContentChild(ChildComponent)
  ChildComponent contentChild;
 
  ParentComponent() {
    // contentChild is not initialized yet
    print(_message(contentChild));
  }
 
  @override
  ngAfterContentChecked() {
    // contentChild is updated after the content has been checked
    print('AfterContentChecked: ${_message(contentChild)}');
  }
 
  String _message(cmp: ChildComponent) =>
      cmp  == null ? 'no child' : '${cmp.where} child';
}
 
@Component(
  selector: 'app',
  template: '''
    <parent-cmp>
      <button (click)="hasContent = !hasContent">
        Toggle content child
      </button>
      <child-cmp *ngIf="hasContent" where="content"></child-cmp>
    </parent-cmp>
  ''',
  directives: const [NgIf, ParentComponent, ChildComponent]
)
export class App {
  bool hasContent = true;
}
 
bootstrap(App);