javascript - two way data binding using dynamic component loader in angular2 -

i want know how 1 can establish 2 way data binding components loaded using dynamic component loader in angular2.for ex.

ngafterviewinit() { //console.log('generic component...' + this.componentname + " loading"); let componentindex = this.keysregister.indexof(this.componentname);   this.dcl.loadnexttolocation(this.typesregister[componentindex],this.target)     .then(ref => {        ref.instance.componentmodel = this.componentmodel;      });   console.log('generic component...' + this.componentname + " loaded"); } 

so if making changes componentmodel in dynamically loaded component , should reflect in generic component & vice versa. inputs?

first: dynamiccomponentloader deprecated couple of versions now, private in next version or after. @ implementation , copy it's quite simple. resolve component using componentresolver, returns factory used viewcontainer create component.

the main difference dynamiccomponentloader used viewcontainerref supplied, directly use viewcontainerref instance create new component / template.

as question:

first, lets separate 2-way data binding @input , @output. must because different in angular.

a quick answer: need manually manage inputs , outputs, yep.

to understand why need dive deep code generator , does, try stay @ top, takes time process.

a note remember: when create component instance of componentref holds reference instance of component.

output outputs need subscribe every eventemitter on instance of newly created component, eventemitters @output properties declare, need unsubscribe them when @ right time, or relay on component created complete() emitter when gets destroyed.

input inputs need listen ngdocheck lifecycle hook , check every item consider @input item, if changed. also, if wondering passing data new component via attributes, not possible since don't have host element, create it... sending data component done by:

1. dependency injection using new injector when creating component
2. setting values on instance, right after created (which same approach subscribing output)

now, lot right... is, it's lot of boilerplate, repetitive code can automate... , that's angular does.

when using template engine, component "behind scene" code represents of above, step step. checks you, subscriptions , clean , more... call's lifecycle hooks actual interrupt points have in component. possible since angular parses component's template , know [inputs] , (outputs), comes metadata via @input() , @output... true animations well...

if think it, angular html code engine takes html markup mixed code instructions written in html , creates javascript code it. code uses instance of component (which match template) , magic called angular.