How to create and fire a custom event in angular

Question

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>

score 25 · Accepted Answer · edited Jul 20 '20 at 22:06

25

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

edited Jul 20 '20 at 22:06

cristid9

1,070
1
17
37

answered May 20 '19 at 15:11

Ehsan Kiani

3,050
1
17
19

It is also important to have the import statement as "import { EventEmitter } from '@angular/core';" rather than "import { EventEmitter } from 'events';" (thanks vs code auto import) – justin Dec 06 '22 at 21:25

score 4 · Answer 2 · answered May 20 '19 at 15:16

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>

score 3 · Answer 3 · answered Aug 05 '20 at 06:26

3

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

answered Aug 05 '20 at 06:26

Teja

55
5

score 2 · Answer 4 · answered Sep 02 '22 at 11:17

2

@Output() loaderStatus= new EventEmitter<{Status:boolean}>(); Status=true; 
this.loaderEvent.emit({Status=false});

answered Sep 02 '22 at 11:17

Muhammad Fahad

28
4

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Sep 07 '22 at 09:35

How to create and fire a custom event in angular

4 Answers4