What is the difference between "view DOM" and "content DOM"?

Question

@ViewChild and @ViewChildren query the elements from view DOM and @ContentChild and @ContentChildren query the elements from content DOM.

@ViewChildren(WriterComponent) 
writers: QueryList<WriterComponent>;    

@ContentChildren(WriterComponent) 
writers: QueryList<WriterComponent>

here I can't understand what exactly the difference between view DOM and content DOM, Could some one please explain it ?

Answer 1

Let us say we have a component called my-component.

The @ViewChild and @ViewChildren will grab something inside that components template, so an html element that is inside the my-component.component.html file.

@ContentChild and @ContentChildren will grab something that is between the brackets of a parent component using the my-component. So let us say we have the following in our parent.component.html:

<my-component>
    <div class="name">Hans</div>
</my-component>

You can use @ContentChild and @ContentChildren to grab the "Hans" element.