Что такое ContentChild

ContentChild — это декоратор в Angular, который позволяет получить доступ к дочернему элементу или директиву из шаблона (контентного проекции) внутри компонента.

Пример:

import { Component, ContentChild, AfterContentInit } from '@angular/core';

@Component({
  selector: 'app-parent',
  template: `<ng-content></ng-content>`
})
export class ParentComponent implements AfterContentInit {
  @ContentChild('childRef') childElement: any;

  ngAfterContentInit() {
    console.log(this.childElement); // Элемент с #childRef
  }
}

Использование в шаблоне:

<app-parent>
  <div #childRef>Проецируемый контент</div>
</app-parent>

Особенности:

• Работает только с элементами, спроецированными через <ng-content>.
• Доступен после ngAfterContentInit.
• Если элемент не найден, вернёт undefined.
• Для нескольких элементов используй @ContentChildren.