ElementRef changed after click event

Question

my scenario is as following: I have 3 components: MainComponent,ComponentA,ComponentB

MainComponent is dymamic loading ComponentA. ComponentA has a button that onClick call MainComponent.addComponent(ComponentB)

export class MainLayout
  {
    constructor(private dcl: DynamicComponentLoader,private elementRef:ElementRef) {
    ///this will work fine
    this.dcl.loadIntoLocation(ComponentA,elementRef);
    }


    addComponent(component:Type) {
     ///this will fail 
      this.dcl.loadIntoLocation(component, this.elememtRef,'child1');
    }
}

The error I am getting: You can see that the error is form the elementRef object....

Uncaught EXCEPTION: Error during evaluation of "click" ORIGINAL EXCEPTION: TypeError: Cannot read property '_view' of undefined ORIGINAL STACKTRACE: TypeError: Cannot read property '_view' of undefined at Object.internalView (http://localhost:63342/decisionApp/decision-modeling-ui/node_modules/angular2/bundles/angular2.dev.js:6236:19) at AppViewManager_.getNamedElementInComponentView (http://localhost:63342/decisionApp/decision-modeling-ui/node_modules/angular2/bundles/angular2.dev.js:11240:33) at DynamicComponentLoader_.loadIntoLocation (http://localhost:63342/decisionApp/decision-modeling-ui/node_modules/angular2/bundles/angular2.dev.js:14547:62) at MainLayout.resolveComponent (http://localhost:63342/decisionApp/decision-modeling-ui/app/playground/ui-composition/mainLayout.js:32:18) at ComponentsList.onClick (http://localhost:63342/decisionApp/decision-modeling-ui/app/playground/ui-composition/ComponentsList.js:25:20)

Why would you use a global var? Do you route away and back to the component in between? — Günter Zöchbauer
Did you see that you have a typo? this.elememtRef != this.elementRef — Eric Martinez

PowerStat PowerStat · Accepted Answer · 2016-01-11T09:50:50

Your describtion is not very clear, because you don't tell us the failure message and some other things about your components. So I can only guess:

Something of component, this.elememtRef,'child1' is not present at the time you call addComponent and so it will fail? Maybe ComponentA has not already been completly loaded? I also assume that "component" means ComponentB ?

ElementRef changed after click event

2 Answers