appcomp.html
`<app-child (callemit) = parentFunc($event)> </app-child>`
appcomp.ts
`
import { Component, OnInit, EventEmitter } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.comp.html'
})
export class AppComponent {
ngOnInit() {}
parentFunc(event){
console.log(event)
}
}
`
childcomp.html
<a href='' [mydirective]="val"> </a>
childcomp.ts
`
@Component({
selector: 'app-child',
templateUrl: './app.child.component.html'
})
`
mydirective.ts
`
import { Directive, ElementRef, Input, Output, HostListener, EventEmitter } from '@angular/core';
@Directive({
selector: '[myDirective]'
})
export class myAppDirective {
constructor() {}
@Input ('myDirective') val: string;
@Output() callEmit = new EventEmitter();
@HostListener('click')
onClick() {
event.preventDefault();
this.callEmit.emit({event , val});
}
}
` In the above code i am trying to call parentFunc from appcomp using eventemitter and not able to get this work. Please let me know what is wrong here.
I think you most call callEmit on child component
childcomp.html
<a href='' [mydirective]="val" (callEmit)="childFunc($event)"> </a>
and in child Component emit the CallEmit Which called from appComp
childcomp.ts
@Output() callEmit = new EventEmitter();
childFunc(){
this.callEmit.emit();
}
and finally use
appCom.html
`<app-child (callemit) = parentFunc($event)> </app-child>`
appcom.ts
parentFunc(event){
console.log(event)
}