CODEWITHSUNDEEP
angularangular2-template
alegrowski
alegrowski

Reputation: 271

Dynamically loading component after bootstrap

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?

Upvotes: 0

Views: 251

Answers (1)

Poul Kruijt
Poul Kruijt

Reputation: 71891

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

Upvotes: 1

Related Questions