Angular Access inner component of ng-template

Let's say we have a component called TopComponent with a template like this:

<ng-template #top>
<inner-selector #inner></inner-selector>
</ng-template>


Its code is simple:

//... imports ...

@Component({
// selector, styles etc
})
export class TopComponent implements AfterViewInit {

@ViewChild('top') topComp : NgbModal;
// NgbModal is a type provided by some 3rd-party library
// I can't modify it

ngAfterViewInit() {
// let's access the #inner component from here
}
}


I can access the #top component using this code:

@ViewChild('top') topComponent: TopComponent;


How can I access the #inner component from the same class?

I tried using @ContentChild('inner') but still getting undefined.

PS. As a workaround, I can create another component, use it inside of the <ng-template> and access all the necessary children from it. But can this be avoided somehow?

Continue reading...