¿Cuál es la diferencia entre ViewChild y ContentChild?

Question

Accepted Answer

Ambos consultan referencias a elementos/componentes secundarios, pero buscan en **lugares diferentes**: **`@ViewChild`** consulta la *propia plantilla del componente*, mientras que **`@ContentChild`** consulta el contenido **proyectado en** el componente a través de ``. ## @ViewChild — consulta tu propia plantilla ```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` accede a elementos/componentes que el componente declara en su plantilla — disponible en **`ngAfterViewInit`**. ## @ContentChild — consulta el contenido proyectado ```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` accede al contenido que **pasó el componente padre** (proyectado a través de ``) — disponible en **`ngAfterContentInit`**. ## La distinción clave ```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) ``` ## Versiones en plural ```ts @ViewChildren(ItemComponent) items!: QueryList; // all matching items ngAfterViewInit() { this.items.forEach(i => ...); this.items.changes.subscribe(...); } ``` ## Consultas de señal modernas ```ts input = viewChild("nameInput"); // signal-based query (newer Angular) ``` ## Por qué es importante Distinguir entre `@ViewChild` (tu plantilla) y `@ContentChild` (contenido proyectado) — y sus respectivos tiempos de ciclo de vida (`ngAfterViewInit` vs `ngAfterContentInit`) — es esencial cuando se construyen componentes reutilizables que necesitan interactuar con elementos de su propia plantilla o con el contenido que los consumidores proyectan en ellos. Es un punto frecuente de confusión y una necesidad común al escribir bibliotecas de componentes, pestañas, controles de formulario y envolvedores que deben coordinarse con elementos secundarios.