Array of Events in Angular

Question

I am using angular 5 for my project. I am trying to emit event from a child component like

@Output studentUpdated:EventEmitter<any> = new EventEmitter()
updated(e){
   this.studentUpdated.emit(e);
}

and listing in parent component like

<student (studentUpdated)="showSuccess($event)" />

Which work as expected. However in my student component I need to implement several events. e.g. saved, updated, deleted, confirmed, scheduled... etc

I was thinking instead of writing one event per line and calling them individually, is there a possibility that we can initialize array of events and execute them as needed. e.g.

  @Output() events:EventEmitter<any>[] = []
  for(var keyNum in arrayOfEvents)
  {
        var key = arrayOfEvents[keyNum];
        this.events.push(new EventEmitter())
  }

Then on certain event we emit the event based on index.

this.events[0].emit(e)

If we can then how can we do that and also how can we listen to that event on parent component ?

You're surely not using angular 4, 5 and 6 in the same project. I inferred from your angular5 that you're using 5.x, so I've edited the question to reflect that. It's helpful for now, and for future readers. Please correct that if it's not right. — msanford
– msanford, Commented Apr 13, 2018 at 13:24
@msanford thanks for updating the question. I mentioned all of them is because I started with Angular 4 updated to 5 and now moving towards 6. All of these versions are using same EventEmitter class. I assume people are awesome like you and understand what some one asked ;) — Riy
– Riy, Commented Apr 13, 2018 at 21:09
How kind of you. It's just that the most recent versions, especially 6, do have a lot of changes. Just helping keep things organized. Good luck! — msanford
– msanford, Commented Apr 13, 2018 at 21:22

Ricardo · Accepted Answer · 2018-04-13 13:22:17Z

5

you can try have another approach to solve your issue, for example, you can restructure your output event data in a way that describe what kind of action your are executing

interface CustomEventData {
 kind : string,
value: any
}

in this way you going to have only eventEmitter output

@Output action:EventEmitter<any> = new EventEmitter()

updated(e){
   this.action.emit({kind "updated", value : e });
}

in your parent component your function that handle the event will react based on the kind of event that is received

showSuccess({ kind , value}) {
    switch(kind)
       case "updated" ...
}

answered Apr 13, 2018 at 13:22

Ricardo

2,48722 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

CREM Over a year ago

This is a good approach, try to have only one EventEmitter and send an object with the type of action you want to perform (update, delete, .....and so on)

CREM Over a year ago

In addition, you have the event.type to identify the kind of event triggered

Riy Over a year ago

@Ricardo thanks for the answer, it should work as you mentioned. I will change my code.

Collectives™ on Stack Overflow

Array of Events in Angular

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related