I have two components, parent and child. In child i have button. I want when user click on that button in child to call method that is in parent. Any suggestion?
This is very basic angular, and you will find plenty of examples through the guides on https://angular.io.
But if you still could not find it, you have to use the @Output
decorator, set an EventEmitter
field to it and call emit
when the button is clicked. This way you can attach to it from your parent using the event notation ()
:
parent
@Component({
selector: 'parent',
template: `<child (buttonClick)="onButtonClick($event)"></child>`
})
export class ParentComponent {
public onButtonClick(event: MouseEvent): void {
// ...
}
}
child
@Component({
selector: 'child',
template: `<button (click)="buttonClick.emit($event)"></button>`
})
export class ChildComponent {
@Output()
public buttonClick: EventEmitter<MouseEvent> = new EventEmitter<MouseEvent>();
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With