[Angular] Difference between ViewChild and ContentChild

*The children element which are located inside of its template of a component are called *view children *. On the other hand, **elements which are used between the opening and closing tags of the host element of a given component are called *content children **.

ViewChild:

Auth-form.component's template:

Here we can use ViewChild to access <auth-message></auth-message> component, because it is a child component of auth-form component.

ContentChild:

auth-form component:

Notice here <auth-remember> is passed into <auth-form> by content projection. 

So here if we want to access <auth-remeber> inside auth-form component, we have to use @ContentChild.