В чем разница между ngAfterContentInit и ngAfterViewInit?

содержание-это то, что передается как дети, которые обычно проецируются на некоторых <ng-content> элемент компонента.
View-шаблон текущего компонента.

представление инициализируется после содержимого и ngAfterViewInit() поэтому называется после ngAfterContentInit().

@Component({
  selector: 'parent-cmp',
  template: '<div #wrapper><ng-content></ng-content></div>'
})
class ParentComponent {
  @ViewChild('wrapper') wrapper:ElementRef;
  @ContentChild('myContent') content:ElementRef;

  ngAfterViewInit() {
    console.log('ngAfterViewInit - wrapper', this.wrapper);
    console.log('ngAfterViewInit - content', this.content);
  }

  ngAfterContentInit() {
    console.log('ngAfterContentInit - wrapper', this.wrapper);
    console.log('ngAfterContentInit - content', this.content);
  }
}

<parent-cmp><div #myContent>foo</div></parent-cmp>

если вы запустите этот код, выход для ngAfterViewInit - content должно быть null.

подробнее о крючках жизненного цикла см. https://angular.io/guide/lifecycle-hooks