Search code examples
angulareventsevent-handlingevent-binding

EventEmitter emits data but not event


I am struggling in a particular scenario. Here is how my Parent and Child class looks

export class ChildComponent{
    .....
    @Output select: EventEmiiter<SomeType> = new EventEmmiter();
    ....
    ....

    methodWhichEmits(){
          this.select.emit(objectOf_SomeType);
    }
}




 export class ParentComponent{

        onSelect(emittedObject){
              //perform some logic
              event.stopPropagation();
        }
    }



 Parent Template
   <child (select)="onSelect($event)"></child>

My understanding(being new to angular) is that an event is emitted from child and caught in parent and then logic is performed in onSelect parent's method on the emitted event (event binding).

But the problem is that the parameter of parent method is not an event but the object of SomeType passed from child. I want to receive an event in my parent method and access the data emitted from child using the event object (something like event.target.value) because I need the event object to invoke stopPropagation() upon.

Even though the code works fine but test case fails (on topPropagation()) as instead of event an object of SomeType is received in parent's method.


Solution

  • An EventEmitter is not an HTML event but an extension of a Subject so it will only send a event with a value