Dynamically loading component after bootstrap

Question

I am using the following:

this.DynamicComponentLoader.loadIntoLocation(NewComponent, this.parent, 'new');

where this.parent is an ElementRef of my main class App.

However, this throws me an error of:

TypeError: Cannot read property 'componentView' of undefined.

I create this.parent like that:

setParent(parent){
    this.parent = parent.nativeElement;
}

and my App class:

export class App{
    constructor(_elementRef:ElementRef){
        Service.setParent(_elementRef);
    }
}

And my NewComponent:

import {Component} from "angular2/core";

@Component({
    selector: 'new',
    templateUrl: 'app/New.html'
})

export class NewComponent{
    constructor(){
        console.log("New Comopnent here")
    }
}

and Service:

export class Service{
    private parent:ElementRef;
    constructor(private DynamicComponentLoader:DynamicComponentLoader){

    }

    setParent(parent){
        this.parent = parent.nativeElement;
    }

    append(){
        this.DynamicComponentLoader.loadIntoLocation(ModalComponent, this.parent, 'modal');
    }
}

Any ideas on where is the problem?

stackoverflow.com/questions/36325212/… contains a working Plunker example. — Günter Zöchbauer
– Günter Zöchbauer, Commented Apr 8, 2016 at 13:02
Your code doesn't show where you use this.DynamicComponentLoader.loadIntoLocation(NewComponent, t... This doesn't work in the constructor for example. — Günter Zöchbauer
– Günter Zöchbauer, Commented Apr 8, 2016 at 13:03
@GünterZöchbauer, I've updated my question. I use it in function — alegrowski
– alegrowski, Commented Apr 8, 2016 at 13:05
And I should mentiont, that class App is main class, that is bootstraped. — alegrowski
– alegrowski, Commented Apr 8, 2016 at 13:07

Poul Kruijt · Accepted Answer · 2016-04-08 13:08:30Z

1

loadIntoLocation expects at least these parameter/types:

loadIntoLocation(type: Type, hostLocation: ElementRef, anchorName: string)

You use the nativeElement of parent, this is not an ElementRef but an HTMLElement.

The solution is, when storing the parent, you should use:

 setParent(parent){
   this.parent = parent;
 }

I can only guess that this is where your problem comes from

answered Apr 8, 2016 at 13:08

Poul Kruijt

72.3k12 gold badges152 silver badges152 bronze badges

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

Collectives™ on Stack Overflow

Dynamically loading component after bootstrap

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related