Issue with updating dynamic component loader

Question

In my ModalComponent, I have the following:

_eventEmitterService.modal.subscribe(stream=>{
    var component = ModalTemplateComponent;
    stream.subscribe(msg=>{
        this.componentRef.dispose();
        this.componentRef = null;
    });
    this._dcl.loadIntoLocation(component,_elementRef, 'modal').then((componentRef)=>{
       this.componentRef = componentRef;
    });
})

which worked very well, until I've updated to Angular 17.

In the changelog, I've read that:

DynamicComponentLoader.loadIntoLocation has been removed. Use @ViewChild(‘myVar’, read: ViewContainerRef) to get hold of a ViewContainerRef at an element with variable myVar. Then call DynamicComponentLoader.loadNextToLocation

So, as I understand, I need to add:

@ViewChild('selector-modal') child:ModalComponent;

to component that hold the ModalComponent.

However, I am not quite sure how I should then load my new component in the ModalComponent:

 this._dcl.loadIntoLocation(component,_elementRef, 'modal').then((componentRef)=>{
       this.componentRef = componentRef;
    });

What is the equivalent this in past angular-16 version?

score 1 · Answer 1 · edited May 23 '17 at 11:54

1

@ViewChild() should have the read parameter set:

@ViewChild('selector-modal', {read: ViewContainerRef}) child:ModalComponent;

And load nextToLocation should look like:

this._dcl.loadNextToLocation(component, this.child).then((cmpRef) => {
  this.cmpRef = cmpRef;
});

See also Angular 2 dynamic tabs with user-click chosen components

edited May 23 '17 at 11:54

Community

1
1

answered May 04 '16 at 09:37

Günter Zöchbauer

623,577
216
2,003
1,567

this seems to be proper answer, however, in my case this.child is undefined. Any idea why this may happen? – uksz May 04 '16 at 09:44
You might not have the `#selector-modal`template variable in your template. – Günter Zöchbauer May 04 '16 at 09:45

Issue with updating dynamic component loader

1 Answers1