What's the difference between @ViewChild and @ContentChild?
AngularAngular Problem Overview
Angular 2 provides @ViewChild
, @ViewChildren
, @ContentChild
and @ContentChildren
decorators for querying a component's descendant elements.
What's the difference between the first two and the latter two?
Angular Solutions
Solution 1 - Angular
I'll answer your question using Shadow DOM and Light DOM terminology (it have come from web components, see more here). In general:
- Shadow DOM - is an internal DOM of your component that is defined by you (as a creator of the component) and hidden from an end-user. For example:
@Component({
selector: 'some-component',
template: `
<h1>I am Shadow DOM!</h1>
<h2>Nice to meet you :)</h2>
<ng-content></ng-content>
`;
})
class SomeComponent { /* ... */ }
- Light DOM - is a DOM that an end-user of your component supply into your component. For example:
@Component({
selector: 'another-component',
directives: [SomeComponent],
template: `
<some-component>
<h1>Hi! I am Light DOM!</h1>
<h2>So happy to see you!</h2>
</some-component>
`
})
class AnotherComponent { /* ... */ }
So, the answer to your question is pretty simple:
> The difference between @ViewChildren
and @ContentChildren
is that @ViewChildren
look for elements in Shadow DOM while @ContentChildren
look for them in Light DOM.
Solution 2 - Angular
As the name suggests, @ContentChild
and @ContentChildren
queries will return directives existing inside the <ng-content></ng-content>
element of your view, whereas @ViewChild
and @ViewChildren
only look at elements that are on your view template directly.
Solution 3 - Angular
This video from Angular Connect has excellent info about ViewChildren, ViewChild, ContentChildren and ContentChild https://youtu.be/4YmnbGoh49U
@Component({
template: `
<my-widget>
<comp-a/>
</my-widget>
`
})
class App {}
@Component({
selector: 'my-widget',
template: `<comp-b/>`
})
class MyWidget {}
From my-widget
's perspective, comp-a
is the ContentChild
and comp-b
is the ViewChild
. CompomentChildren
and ViewChildren
return an iterable while the xChild return a single instance.
Solution 4 - Angular
Lets take a example, We have one home component and one child component and inside child component one small child component.
<home>
<child>
<small-child><small-child>
</child>
</home>
Now you can grab all children elements in context of home component with @viewChildren because these are directly added in template of home component.
But, when you try to access <small-child>
element from context of child component then you can't access it because it is not directly added within child component template.
It is added through content projection into child component by home component.
This is where @contentChild comes in and you can grab it with @contentChild.
The difference occur when you try to access elements reference in controller. You can access grab all elements that are directly added into template of component by @viewChild. But you can't grab projected elements reference with @viewChild To access projected element you have to use @contentChild.
Solution 5 - Angular
Just rename ViewChildren to InternalChildren, and ContentChildren to ExternalChildren