*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.