Dynamic component loader - Cannot read property 'viewContainerRef' of undefined

Question

im following all steps of the ad-banner tutorial on Angular.io. But at the end after all setup, i get an error comming from this component and function:

Ad-banner.component TS

loadComponent() {
    this.currentAdIndex = (this.currentAdIndex + 1) % this.ads.length;
    const adItem = this.ads[this.currentAdIndex];

    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(adItem.component);

    const viewContainerRef = this.adHost.viewContainerRef; ---->ERROR comes from this Line
    viewContainerRef.clear();

    const componentRef = viewContainerRef.createComponent(componentFactory);
    (<AdComponent>componentRef.instance).data = adItem.data;
  }

I get the log correctly, the hero data comes to the home component where I'll display the ads, but not with the error, so can anyone sort me out?

EDIT The Main Directive

import { Directive, ViewContainerRef } from '@angular/core';

@Directive({
  selector: '[ad-host]'
})
export class AdDirective {

  constructor(public viewContainerRef: ViewContainerRef) { }

}

When you call this function? It should be called in AfterViewInit or later. — Anton Marinenko
– Anton Marinenko, Commented May 29, 2020 at 14:27
this.adHost is undefined when loadComponent() is called. Where is loadComponent() called from? — ukn
– ukn, Commented May 29, 2020 at 14:33
constructor(public viewContainerRef: ViewContainerRef) { } have this in code? — Aakash Garg
– Aakash Garg, Commented May 29, 2020 at 14:34
@Aakash Garg Ive edited the post, yes I have it's in the Directive — Mellville
– Mellville, Commented May 29, 2020 at 14:37

Aakash Garg · Accepted Answer · 2020-05-29 14:40:06Z

1

Your component HTML should be :-

<div class="ad-banner-example">
              <h3>Advertisements</h3>
              <ng-template ad-host></ng-template>
            </div>

You component Ts should have :-

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

You AdhostDirective should be in declarations of your module.

and you should be calling this.loadComponent(); in ngoninit.

answered May 29, 2020 at 14:40

Aakash Garg

11k2 gold badges11 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mellville Over a year ago

every thing is in place, declarations, entrycomponents

Aakash Garg Over a year ago

and the directive inside declarations in module?

Collectives™ on Stack Overflow

Dynamic component loader - Cannot read property 'viewContainerRef' of undefined

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related