[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:

    <div>
      <form (ngSubmit)="onSubmit(form.value)" #form="ngForm">
        <ng-content select="auth-remember"></ng-content>
        <auth-message></auth-message>
      </form>
    </div>

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:

      <auth-form 
        (submitted)="loginUser($event)">
        <auth-remember
          [role]="'checkbox1'"  
          (checked)="rememberUser($event)">
        </auth-remember>
      </auth-form>

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

      <form (ngSubmit)="onSubmit(form.value)" #form="ngForm">
        <ng-content select="auth-remember"></ng-content>
        <auth-message></auth-message>
      </form>
    </div>

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