Что такое `ViewChild` и `ContentChild`?

Базовая идея

Оба API дают ссылку на дочерний элемент, директиву или компонент, но смотрят в разные деревья.

Разница

• @ViewChild / viewChild() — внутри собственного шаблона компонента (view tree).
• @ContentChild / contentChild() — в проецируемом контенте, который родитель передал через ng-content.

import { Component, ElementRef, viewChild, contentChild } from '@angular/core';

@Component({
  selector: 'app-card',
  template: `
    <h2 #title>Заголовок</h2>
    <ng-content></ng-content>
  `,
})
export class CardComponent {
  title = viewChild.required<ElementRef>('title');
  projected = contentChild(ItemDirective);
}

<app-card>
  <div item>Это ContentChild</div>
</app-card>

Классические декораторы доступны после ngAfterViewInit / ngAfterContentInit. Signal queries (viewChild, contentChildren) читаются как сигналы и лучше стыкуются с реактивным стилем.

Ловушка

Искать проецируемый контент через ViewChild — частая ошибка на собесе и в коде. Есть ещё ViewChildren / ContentChildren для списков.

Итог

View = свой шаблон; Content = то, что вложил родитель через projection. Выбирайте query по месту в DOM-дереве.