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>
Custom events are created in Angular using its EventEmitter class. These events are used to communicate to the Parent Component from a child Component.
Create a custom component event using the <aura:event> tag in a . evt resource. Events can contain attributes that can be set before the event is fired and read when the event is handled. Use type="COMPONENT" in the <aura:event> tag for a component event.
Custom events are the EventEmitter instances. To create a custom event we need to create an instance of EventEmitter annotated by @Output() . Then this instance calls emit() method to emit payload which can be received by event object $event . In our example we are taking a parent child component communication example.
EventEmitter class is used in components with the @Output to emit custom events synchronously or asynchronously. EventEmitter maintains a list of subscribing instances and register handlers for the event.
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>
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