ContentChild not working via QueryTemplate and Component reference

Question

I am able to project content but unable to get reference of the same

https://stackblitz.com/edit/angular-khyr1u?file=src%2Fapp%2Fapp.component.html

I tried using the #SelectorName and also via Using component name with ContentChild() and ContentChildren(). Somehow I am unable to get reference despite calling in ngAfterViewInit hook

updated plunk illustrating : viewchild, viewchildren ,contentchild , contentChildren :https://stackblitz.com/edit/angular-wnhayw?file=src/app/course-card/course-card.component.ts

Answer 1

What you are looking for is the @ViewChild decorator instead of the @ContentChild decorator.

The @ContentChild decorator provides you with a reference to an element that that is between the opening and closing tag of your component:

<my-component>
  <div #myContentChild></div>
</my-component>

The @ViewChild decorator provides you with a reference to an element that is within your component view:

my-component.component.html:

<div #myViewChild></div>

In your example, the #test element is a view-child of my-app and a content-child of <app-course-card>. That means that if you want to query #test from within the AppComponent component then you use @ViewChild. If you want to query #test from within CourseCardComponent then you need to use @ContentChild.

For further details see the following SO post:

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