¿Cuál es la diferencia y los usos de @ContentChild
y @ViewChild
en Angular 7?
1 respuesta
ViewChild
Se considera ViewChild
a todo elemento que está dentro del propio template del componente; es decir, todo lo que esté dentro del template.
ContentChild
Un ContentChild
es similar a un ViewChild
, sin embargo, la diferencia sustancial es que se considera solo los elementos hijos del elemento ya hosteado; es decir, cualquier hijo del componente como tal (no del template).
Imaginemos que tienes un componente Card
con su template:
<div class="card">
<header class="card__header">
<h2>{{ title }}</h2>
</header>
<article class="card__body">
<ng-content></ng-content>
</ng-content>
</div>
Aquí, tanto div.card
como header.card__header
como article.card__body
son ViewChild.
Ahora, al usar el componente:
<ui-card>
<div class="picture">
...
</div>
</ui-card>
El elemento div.picture
vendría a ser un ContentChild.
Resumen
ViewChild
: hijo dentro del template.
ContentChild
: hijo dentro del componente (como host).