@Component({
  selector: 'app',
  template: `
    <h1>Angular's content projection and lifecycle example</h1>
    <app-content>
      <app-nested-component></app-nested-component>
    </app-content>
  `,
})
export class App {}

@Component({
  selector: 'app-content',
  template: `
    <button (click)="display = !display">Toggle content</button>
    <ng-content *ngIf="display"></ng-content>
  `,
})
export class Content {
  display = false;
}

@Component({
  selector: 'app-nested-component',
  template: `<b>Hello World!</b>`,
})
export class NestedComponent implements OnDestroy, OnInit {
  
  ngOnInit() {
    alert('app-nested-component initialised!');
  }
  
  ngOnDestroy() {
    alert('app-nested-component destroyed!');
  }
  
}