Click component dynamic event binding - Angular 2

Question

There is a chance of duplication, but my scenario is slightly different.

I want to execute a click event for my dynamic component.

here is my structure:

<razor> <mvc-partial> <dynamic-html> // buttonPress(){console.log("Function called in dynamicHtml) // Output() to call function in razor.ts </dynamic-html> </mvc-partial> <razor> 

File RenderingViewDynamic.ts

 import { Component, Directive, NgModule, Input, Output, EventEmitter, ViewContainerRef, Compiler, ComponentFactory, ModuleWithComponentFactories, ComponentRef, ReflectiveInjector, OnInit, OnDestroy, ViewChild } from '@angular/core'; import { RouterModule } from '@angular/router'; import { CommonModule } from '@angular/common'; import { Http } from "@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: the button in my dynamic html wants to bind this event to work in razor.ts.

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

update . Trying to contact the 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] }) 

An error pops up: Unable to resolve all parameters for DynamicComponent: (?).

The above error is resolved by adding @Inject(forwardRef(() => AppService)

 constructor( @Inject(forwardRef(() => AppService)) private appService: AppService) { } 

Answer 1

You can bubble a click event from your child to your parent using an EventEmitter:

 clickEmitter = new EventEmitter(); clickEmitter.emit(); <your-child-component (clickEmitter)="functionInParent()"></your-child-component> 

Edit: If you want to reach your child component according to your comment: <dynamic-html>-<mvc-partial>-<razor> you can reference components using hashtag (#) and the hashtag name or component name

 @ViewChild(MvcPartialComponent) mvcPartialComponent: MvcPartialComponent; <mvc-partial #mvc-partial></mvc-partial> @ViewChild('mvc-partial') mvcPartialComponent: MvcPartialComponent; 

etc.