Issue
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?
Solution
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.
Answered By - alexpods
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.