import { Component , Input , AfterContentInit , AfterContentChecked , ContentChild } from '@angular/core' ; import { ChildComponent } from './child.component' ; @ Component ( { selector : 'my-parent' , template : `
  <div class="parent">
    <div class="parent__title">
     {{title}}
    </div>
    <div class="parent__content">
        <ng-content></ng-content>
    </div>
  </div>` , styles : [ `
    .parent {
      background: green;
      color: white;
    }
  ` ] } ) export class ParentComponent implements AfterContentInit , AfterContentChecked { @ Input ( ) title : string ; @ ContentChild ( ChildComponent ) contentChild : ChildComponent ; ngAfterContentInit ( ) { console . log ( 'AfterContentInit. Child is' , this . contentChild . status ) ; this . title = 'Parent' ; } ngAfterContentChecked ( ) { console . log ( 'AfterContentChecked. Child is' , this . contentChild . status ) ; if ( this . contentChild . status == 'Ready' ) { console . log ( 'AfterContentChecked (no change)' ) ; } else { this . contentChild . status = 'Ready' ; } } }