Cacher is the code snippet organizer for pro developers

<!-- Child Component -->
<div class="panel panel-default">
  <div class="panel-heading" #heading>{{ element.name }}</div>
  <div class="panel-body">
    <ng-content></ng-content>
  </div>
</div>

<!-- Parent Component -->
<app-server-element [srvElement]='serverElement' *ngFor="let serverElement of serverElements">
    <p #contentParagraph>
        <strong *ngIf="serverElement.type === 'server'" style="color: red">{{ serverElement.content }}</strong>
        <em *ngIf="serverElement.type === 'blueprint'">{{ serverElement.content }}</em>
    </p>
</app-server-element>

import {
  Component,
  OnInit,
  Input,
  ViewEncapsulation,
  OnChanges,
  SimpleChanges,
  DoCheck,
  AfterContentInit,
  AfterContentChecked,
  AfterViewInit,
  AfterViewChecked,
  OnDestroy,
  ViewChild,
  ElementRef,
  ContentChild,
} from '@angular/core';

@Component({
  selector: 'app-server-element',
  templateUrl: './server-element.component.html',
  styleUrls: ['./server-element.component.css'],
  encapsulation: ViewEncapsulation.None,
})
export class ServerElementComponent implements OnInit, OnChanges, DoCheck, AfterContentInit, AfterContentChecked, AfterViewInit, AfterViewChecked, OnDestroy {
  @Input('srvElement') element: {type: string, name: string, content: string};
  @ViewChild('heading') heading: ElementRef;
  @ContentChild('contentParagraph') content: ElementRef;

  constructor() {
    console.log('1. Constructor called!');
    // heading and content are undefined
    console.log('1. Heading: ' + this.heading);
    console.log('1. Content: ' + this.content);
  }

  ngOnChanges(changes: SimpleChanges) {
    console.log('2. ngOnChanges called!');
    console.log('2. Heading: ' + this.heading.nativeElement.textContent);
    console.log('2. Content: ' + this.content.nativeElement.textContent);
    console.log(changes);
  }

  ngOnInit() {
    console.log('3. ngOnInit called!');
    console.log('3. Heading: ' + this.heading.nativeElement.textContent);
    console.log('3. Content: ' + this.content.nativeElement.textContent);
  }

  ngDoCheck() {
    console.log('4. ngDoCheck called!');
    console.log('4. Heading: ' + this.heading.nativeElement.textContent);
    console.log('4. Content: ' + this.content.nativeElement.textContent);
  }

  ngAfterContentInit() {
    console.log('5. ngAfterContentInit called!');
    console.log('5. Heading: ' + this.heading.nativeElement.textContent);
    console.log('5. Content: ' + this.content.nativeElement.textContent); // Should contain value
  }

  ngAfterContentChecked() {
    console.log('6. ngAfterContentChecked called!');
    console.log('6. Heading: ' + this.heading.nativeElement.textContent);
    console.log('6. Content: ' + this.content.nativeElement.textContent);
  }

  ngAfterViewInit() {
    console.log('7. ngAfterViewInit called!');
    console.log('7. Heading: ' + this.heading.nativeElement.textContent); // Should contain value
    console.log('7. Content: ' + this.content.nativeElement.textContent);
  }

  ngAfterViewChecked() {
    console.log('8. ngAfterViewChecked called!');
    console.log('8. Heading: ' + this.heading.nativeElement.textContent);
    console.log('8. Content: ' + this.content.nativeElement.textContent);
  }

  ngOnDestroy() {
    console.log('9. ngOnDestroy called!');
    console.log('9. Heading: ' + this.heading.nativeElement.textContent);
    console.log('9. Content: ' + this.content.nativeElement.textContent);
  }
}