ngAfterContentChecked() not understandable + angular 2

Question

I have been trying to figure out the meaning of ngAfterContentChecked() and ngAfterViewChecked() for some time. Have tried various posts, but still can't understand their exact meaning. Following is the definition given in angular.io. Can somebody explain it properly with some goood example.

ngAfterViewChecked()- Respond after Angular checks the component's views and child views.
Called after the ngAfterViewInit and every subsequent ngAfterContentChecked().
A component-only hook.

ngAfterContentChecked()- Respond after Angular checks the content projected into the component.
Called after the ngAfterContentInit() and every subsequent ngDoCheck().
A component-only hook.

Answer 1

Let's say we have this Html

<div> // div A
  <app-my-component>
    <div>
      this is some content for the component app-my-component
    </div>
  </app-my-component>
</div> // div B

Let's say we have this component

@Component({
  selector: 'app-my-component',
  template: `
    <div> // div C
      here is the View HTML but below we receive content html
      <ng-content></ng-content>
    </div> // div D
  `
})

In our component from div A all the way through div B that is the View. So AfterViewChecked will run when we reach B. The content is everything that resides in the ng-content tag. So AfterContentChecked will run when we reach div D. However any and I mean any changes to the view can trigger an additional AfterViewCheck which should also trigger an AfterContentCheck