I'm new in Angular and I've read about event binding so I can do something like this:
<button (click)="doSomething()"></button>
I'd like to know if it's possible to create a custom event and do the same thing. Let's say that I want to have a custom event like: deleteItem, is it possible to do something like this? And how?
<my-component (deleteItem)="doSomething()"></my-component>
Of course, you can use an eventEmitter
in my-component ts file add this
@Output() deleteItem= new EventEmitter();
and when you want to rise the event do this
this.deleteItem.emit();
also you can pass data like this
this.countUpdate.emit({value: some data });
then catch it in the parent component like this
<my-component (deleteItem)="doSomething($event)"></my-component>
and in the parent ts file
doSomething(event)
{
console.log(event);
}
You should check out Angular's documentations example for parent listens to child event:
You declare a class property with the @Output() decorator and instantiate it to a new EventEmitter instance.
Example from the Angular docs
import { Component, EventEmitter, Input, Output } from '@angular/core';
@Component({
selector: 'app-voter',
template: `
<h4>{{name}}</h4>
<button (click)="vote(true)" [disabled]="didVote">Agree</button>
<button (click)="vote(false)" [disabled]="didVote">Disagree</button>
`
})
export class VoterComponent {
@Input() name: string;
@Output() voted = new EventEmitter<boolean>();
didVote = false;
vote(agreed: boolean) {
this.voted.emit(agreed);
this.didVote = true;
}
}
Remember it is good practice to always add generic typing to the EventEmitter if it emits a value.
If an event emits a boolean value you should instantiate it with @Output() eventName = new EventEmitter<boolean>();
The component above could be used in a parent component with <app-voter (voted)="handleVote($event)"></app-voter>
EventEmitter can used to create your own custom events, eventemitter are objects in angular framework.
@Output() deleteItem= new EventEmitter<{itemName:string}>(); ItemName=''; this.deleteItem.emit({ItemName=this.itemName});
@Output() loaderStatus= new EventEmitter<{Status:boolean}>(); Status=true;
this.loaderEvent.emit({Status=false});
