typescript - How to raise event for buttons which are created dynamically in DCL.loadintolocation()? -

hi trying load component using dcl loadintolocation().the component loading want raise event buttons created dynamically.i made demo here http://plnkr.co/edit/pfofyd9xn5xmzwk9q0fp?p=preview > want raise event button name "destroy". please me how bind event buttons created dynamically.

add(){ this.rendertemplate(`   <div id="evnt">   <button (click)="raiseevent()">destroy</button>     <some-component></some-component>   </div> `, [somecomponent]); 

}

raiseevent(){ alert('hi'); 

}

in fact, raiseevent method called should in component dynamically added. in case it's in component creates it.

if this, raiseevent method called:

function tocomponent(template, directives) {   @component({      selector: 'fake-component',     template,directives   })    class fakecomponent {     a:any;     dom:browserdomadapter;     public fakeform: controlgroup;     public items: querylist<somecomponent>;      constructor(@viewquery(somecomponent)             items:querylist<somecomponent>) {       this.items = items;     }      raiseevent(){       alert('hi');     }   }   return fakecomponent; } 

if want call raiseevent method parent component, can refactor fakecomponent described below. shows how inject parent component , use methods.

function tocomponent(template, directives) {   @component({      selector: 'fake-component',     template,directives   })    class fakecomponent {     a:any;     dom:browserdomadapter;     public fakeform: controlgroup;     public items: querylist<somecomponent>;      constructor(@viewquery(somecomponent)            items:querylist<somecomponent>,           private comp: appcomponent) {       this.items = items;     }   }   return fakecomponent; } 

here new content of template:

add() {   this.rendertemplate(`     <div id="evnt">       <button (click)="comp.raiseevent()">destro</button>       <some-component></some-component>     </div>   `, [somecomponent]); } 

hope helps you, thierry