How to create and fire a custom event in angular

angular angular-event-emitter
GJCode picture GJCode · May 20, 2019 · Viewed 15.5k times · Source

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>

Answer

Ehsan Kiani picture Ehsan Kiani · May 20, 2019

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);
    }

Related questions

An error occurred: @Output not initialized

I'm working on an angular app for managers to keep track of their teams, and I'm stuck with an @Output error : An error occurred: @Output deleteMeeting not initialized in 'MeetingItemComponent'. I have a Meetings component, generating a list of MeetingItem …

Read More
Trigger event when element becomes visible with ngIf

I'm having some divs with ngIf, I just want to have a way to know if the particular div is the one which is visible/active right now like an event trigger like focus (it doesn't work) or something, and …

Read More
Angular: invoking a function in one component, with events on another component

Working with Angular6, let's say I have 2 child components A, B that are both part of parent component P. I want to use a form input on component A- so once clicked, the string value will pass and trigger a …

Read More