typescript - Dynamic Component Click event Binding - Angular 2 -

there chance of possible duplicate scenario bit different.

i want perform click event dynamic component.

here structure :

     <razor>           <mvc-partial>             <dynamic-html> // buttonpress(){console.log("function called in dynamichtml)                           // output() call function in razor.ts             </dynamic-html>           </mvc-partial>       <razor> 

renderingviewdynamic.ts file

import {     component,     directive,     ngmodule,     input,     output,     eventemitter,     viewcontainerref,     compiler,     componentfactory,     modulewithcomponentfactories,     componentref,     reflectiveinjector, oninit, ondestroy, viewchild } '@angular/core';  import { routermodule } '@angular/router'; import { commonmodule } '@angular/common'; import { http } "@angular/http"; import 'rxjs/add/operator/map';  export function createcomponentfactory(compiler: compiler, metadata: component): promise<componentfactory<any> | undefined>{        console.log(compiler)     console.log(metadata)     class dynamiccomponent {         @output() buttontype: eventemitter<string> = new eventemitter<string>()          // button click operation         buttonpress() {             this.buttontype.emit();         }     };     const decoratedcmp = component(metadata)(dynamiccomponent);      @ngmodule({ imports: [commonmodule, routermodule], declarations: [decoratedcmp] })     class dynamichtmlmodule { }      return compiler.compilemoduleandallcomponentsasync(dynamichtmlmodule)         .then((modulewithcomponentfactory: modulewithcomponentfactories<any>) => {             console.log(decoratedcmp)             console.log(modulewithcomponentfactory.componentfactories.find(x => x.componenttype === decoratedcmp))             return modulewithcomponentfactory.componentfactories.find(x => x.componenttype === decoratedcmp);         }); }  @component({     selector: 'mvc-partial',     template: `<div #dynamichtml></div>` }) //@directive({ selector: 'mvc-partial' }) export class renderingviewdynamic implements oninit {     @viewchild('dynamichtml', { read: viewcontainerref }) target: viewcontainerref;     html: string = '<p></p>';     @input() url: string;     cmpref: componentref<any>;      constructor(private vcref: viewcontainerref, private compiler: compiler, private http: http) { }      ngoninit() {         this.http.get(this.url)             .map(res => res.text())             .subscribe(             (html) => {                 this.html = html;                 if (!html) return;                  if (this.cmpref) {                     this.cmpref.destroy();                 }                  const compmetadata = new component({                     selector: 'dynamic-html',                     template: this.html,                 });                  createcomponentfactory(this.compiler,compmetadata)                     .then(factory => {                         //const injector = reflectiveinjector.fromresolvedproviders([], this.vcref.parentinjector);                         this.cmpref = this.target.createcomponent(factory!);                     });             },             err => console.log(err),             () => console.log('mvcpartial complete')             );      }      ngondestroy() {         if (this.cmpref) {             this.cmpref.destroy();         }     }    } 

razor.component.html

<mvc-partial [url]="'/view/index'" (buttontype)="click()"></mvc-partial>

razor.component.ts

click(){ console.log("in razor") }

my question is, button in dynamic-html want bind event function in razor.ts.

like <dynamic-html>-<mvc-partial>-<razor> how achieve it?

update: trying communicate service

class dynamiccomponent {         constructor(private appservice: appservice) { }          buttonpress() {             this.appservice.onbuttonclickaction.emit()         }     };     const decoratedcmp = component(metadata)(dynamiccomponent);      @ngmodule({ imports: [commonmodule, routermodule], declarations: [decoratedcmp], providers: [appservice] }) 

error pops: can't resolve parameters dynamiccomponent: (?).

above error solved adding @inject(forwardref(() => appservice)

constructor( @inject(forwardref(() =>  appservice)) private appservice: appservice) { }  

you can bubble click event child parent using eventemitter:

clickemitter = new eventemitter();  clickemitter.emit();  <your-child-component (clickemitter)="functioninparent()"></your-child-component> 

edit: if want reach child component per comment: <dynamic-html>-<mvc-partial>-<razor> can reference components using hashtag (#) , name of hashtag or component name

@viewchild(mvcpartialcomponent) mvcpartialcomponent: mvcpartialcomponent;  <mvc-partial #mvc-partial></mvc-partial> @viewchild('mvc-partial') mvcpartialcomponent: mvcpartialcomponent; 

etc etc.

wiki