1.

What's the difference between @ViewChild and @ContentChild?

Answer»

To understand the difference between the ViewChild and CONTENTCHILD decorators, you first need to understand the differences between the Shadow DOM and light DOM. ALSO, think of yourself as the creator of a component that other developers will use in their applications.

Shadow DOM is an internal DOM of your component that is DEFINED by the creator of the component and hidden from the end-user or the developer using the component.

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 the DOM/content that is projected into the component by the developer or the user of the 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 { /* ... */ }

The difference between @ViewChildren and @ContentChildren is that @ViewChildren looks for elements in Shadow DOM while @ContentChildren looks for them in Light DOM. Both of them RETURN the references to the queried elements.


Discussion

No Comment Found

Related InterviewSolutions