Dynamically load components inside *ngFor in Angular 9

Question

I studied the code available on angular.io , and I replicated it in my scenario with a mat-tab-group . However, I would like to be able to use the ad-host directive inside a *ngFor . I tried it, and the directive is always undefined .

I searched here and, while there are several questions addressing this problem, I found no clear example on how to do this. The idea is that I have a mat-tab-group composed of several mat-tabs , which are loaded through a *ngFor directive. In each tab I would like to show a different component according to the selected index. Is there any way to achieve this?

Here is my modified stackblitz: as you can see it literally says this.adHost is undefined in the console.

Answer 1

You need to change the way you get a reference to your adHost .

@ViewChild(AdDirective, {static: false}) adHost: AdDirective;

It needs to be static: false (see documentation ) because it's rendered dynamically by mat-tab , so it's not always in the template.

And don't call loadComponents in ngOnInit , since the view has not been rendered yet, so adHost will be undefined. Use ngAfterViewInit for instance. I just commented it.

Corrected stackblitz

Edit

Following your clarifications, I changed quite a lot of things (removed your setInterval , used @ViewChildren instead of ViewChild , use ngOnChanges to know when to render the data, etc.).

Here is the stackblitz example