Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

data binding not working for dynamic component #16849

Closed
mcalmus opened this issue May 17, 2017 · 5 comments

Comments

Projects
None yet
4 participants
@mcalmus
Copy link

commented May 17, 2017

I'm submitting a ... (check one with "x")

[X] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

When a component is created and inserted using a factory it shows up in the UI, but data-binding (both one-way and two-way) does not get applied.

Expected behavior

Component should work as though it was created the "normal" way.

Minimal reproduction of the problem with instructions

This plunkr illustrates the issues: https://plnkr.co/edit/sD800XIb23gD7xftJha8?p=preview

This was reported in #10523, but the issue was closed because it was deemed a support request.

What is the motivation / use case for changing the behavior?

Please tell us about your environment:

Windows 7, Tomcat 8.5

  • Angular version: 2.0.X

4.0.2

  • Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

IE 11, FF 44 ESR, FF 53

  • Language: [all | TypeScript X.X | ES6/7 | ES5]
    TypeScript 2.2

  • Node (for AoT issues): node --version =

@alexzuza

This comment has been minimized.

Copy link
Contributor

commented May 17, 2017

You're creating component outside change detection tree. Either use vcRef.createComponent or appRef.attachView as below

compRef : any
constructor(private appRef: ApplicationRef){}
...
this.compRef = cmpFactory.create(ctxInjector, null, '#dynCompDiv');
this.appRef.attachView(this.compRef.hostView);
...
ngOnDestroy() {
   if(this.compRef) {
      this.appRef.detachView(this.compRef.hostView);
   }
}

https://plnkr.co/edit/4OF5PeEk0zc71tdJqCqN?p=preview

@mcalmus

This comment has been minimized.

Copy link
Author

commented May 17, 2017

Such a simple fix. Thanks.

@mcalmus mcalmus closed this May 17, 2017

@thw0rted

This comment has been minimized.

Copy link

commented Jun 19, 2018

I know this is over a year old, but I'm confused about how it works. What part of the added code binds the value of name in the App instance to the value of name in DynComponent? Normally you'd have to declare a binding in the App template along the lines of <dyn-app [name]="name"> but of course the child instance is being dynamically created so that's not possible. I was expecting a call where I have to make an explicit call that says something like

this.compRef.bind(
  "name", // DynComponent input name
  this, // Object containing member to be tracked
  "name" // Property to be tracked
);

I assume the Plunkr worked when this issue was posted but of course it doesn't anymore -- I'd really like to see it in action to understand this better.

@mlc-mlapis

This comment has been minimized.

Copy link

commented Jun 19, 2018

@thw0rted ... you can use the pattern:

... for @Input():

this._cmpRef.instance.inputname = 'mytextvalue';

... for @Output():

this._cmpRef.instance.outputname.subscribe(this.anymethod);
@thw0rted

This comment has been minimized.

Copy link

commented Jun 19, 2018

Thanks, I just found a bunch of stuff about how dynamic components don't actually support Input / Output, how ngOnChanges won't run, etc. I might rewrite my components to support this better (e.g. using Observables for @Input) but I might also try to solve my higher-level problem differently -- I'm doing something similar to this so I'm going to see if there's a better pattern to use.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.