Qual é a diferença entre ViewChild e ContentChild?

Question

Accepted Answer

Ambas consultam referências para elementos/componentes filhos, mas procuram em **locais diferentes**: **`@ViewChild`** consulta o *próprio template* do componente, enquanto **`@ContentChild`** consulta o conteúdo **projetado dentro** do componente via ``. ## @ViewChild — consultar seu próprio template ```ts @Component({ template: ` `, }) export class ParentComponent implements AfterViewInit { @ViewChild("nameInput") input!: ElementRef; // by template ref @ViewChild(ChildComponent) child!: ChildComponent; // by component type ngAfterViewInit() { this.input.nativeElement.focus(); // available after the VIEW initializes this.child.doSomething(); // call a child component's method } } ``` `@ViewChild` acessa elementos/componentes que o próprio componente declara em seu template — disponível em **`ngAfterViewInit`**. ## @ContentChild — consultar conteúdo projetado ```ts @Component({ selector: "app-card", template: `

`, // content projected here }) export class CardComponent implements AfterContentInit { @ContentChild(CardTitleComponent) title!: CardTitleComponent; ngAfterContentInit() { // the projected content is ready here (EARLIER than ngAfterViewInit) console.log(this.title); } } ``` ```html

Hello

``` `@ContentChild` acessa o conteúdo que o **pai passou** (projetado através de ``) — disponível em **`ngAfterContentInit`**. ## A distinção principal ```text @ViewChild → elements in THIS component's own template → ngAfterViewInit @ContentChild → elements PROJECTED in from the parent → ngAfterContentInit (plural: @ViewChildren / @ContentChildren return a QueryList of all matches) ``` ## Versões plurais ```ts @ViewChildren(ItemComponent) items!: QueryList; // all matching items ngAfterViewInit() { this.items.forEach(i => ...); this.items.changes.subscribe(...); } ``` ## Consultas modernas de sinais ```ts input = viewChild("nameInput"); // signal-based query (newer Angular) ``` ## Por que isso importa Distinguir entre `@ViewChild` (seu template) e `@ContentChild` (conteúdo projetado) — e seus respectivos tempos de ciclo de vida (`ngAfterViewInit` vs `ngAfterContentInit`) — é essencial ao criar componentes reutilizáveis que precisam interagir com seus próprios elementos de template ou com o conteúdo que os consumidores projetam neles. É um ponto comum de confusão e uma necessidade frequente ao criar bibliotecas de componentes, abas, controles de formulário e wrappers que devem coordenar com elementos filhos.