Interpolation binding doesn't work

Question

I'm loading a component dynamically via loadAsRoot After I load the component, the component is loaded in the UI but the bounded interpolated data isn't loaded even though it's properties have values.

var componentLoadPromise = this._componentLoader.loadAsRoot(MyComponent, "#placeholder", this._injector);

 return componentLoadPromise.then(myComp=> {
          return new Promise<boolean>(resolve =>{ 
          myComp["_hostElement"]["component"]["display"](compOptions, resolve);      
          });
    });
enter code here

Component.ts

  // bounded properties
  public  content: string;
  public  title: string;


 public display(dialogOptions: IDialogParams, resolve: (boolean) => any){
    document.onkeyup = null;
    this._resolveAction = resolve;
    this.setUpElements();
    // here my bounded view properties are populated
    this.populateViewProperties(dialogOptions);

    this.wireEvents();
    this._confirmElement.style.display = "block";    
 }

Please share your code. Html + Javascript. – Blunderfest Jul 18 '16 at 13:49 — Blunderfest, Jul 18 '16 at 13:49

score 1 · Accepted Answer · edited May 23 '17 at 12:25

1

DynamicComponentLoader is deprecated. Use instead ViewContainerRef.createComponent()

DynamicComponentLoader.loadAsRoot() is only supposed to be used by bootstrap() for the root component and doesn't do any change detection by default. You would need to wire up change detection manually to make it work.

See also

edited May 23 '17 at 12:25

Community

1
1

answered Jul 18 '16 at 14:00

Günter Zöchbauer

623,577
216
2,003
1,567

1

I don't see a lot of documentation on I have a global service that needs to load dynamically a component when it is called. How do I get a ref to ViewContainerRef? – Ace Jul 19 '16 at 07:13
You can inject it `constructor(ref:ViewContainerRef)` then you get the one from the component where you inject it or you can use `@ViewChild(ComponentTypeOrTemplateVariableName, {read: ViewContainerRef}) ref:ViewContainerRef;`. Components added this way are added as sibling of the element the `ViewContainerRef` is from. – Günter Zöchbauer Jul 19 '16 at 07:15
Also, how do you know that it's deprecated? where is the reference to that? – Ace Jul 19 '16 at 07:21
It was mentioned many times in GitHub issues by Angular team members since months. I haven't seen it added to the `DynamicComponentLoader` to make it official myself though. – Günter Zöchbauer Jul 19 '16 at 07:23
See also http://stackoverflow.com/questions/36325212/angular-2-dynamic-tabs-with-user-click-chosen-components/36325468#36325468 – Günter Zöchbauer Jul 19 '16 at 07:47

Interpolation binding doesn't work

1 Answers1