Difference between EventEmitter vs Output Decorators in Angular-Cli

Question

Why does EventEmitter and Output Decorator needs to be used together ?, I cannot see the difference between the two,

If they are required to be used together why not just one decorator to emit as well as bind to selector wherever it is used !

Appreciate any explanation !

Thank You

Answer 1

EventEmitter is just a Subject .

@Output() is what marks the field as output for Angular event binding.

I haven't tried in Angular TS, but in Angular Dart it was possible to just use a Stream (equivalent to Subject ) instead of EventEmitter . In recent versions EventEmitter was removed completely in Dart Angular. Perhaps this works in Angular TS as well.

There were plans to extends the API of EventEmitter in a way that might be incompatible with Subject , therefore a custom class was created.
But there are no signs this will actually happen.

Answer 2

EventEmitter allows you to create a custom event, emit from this event and subscribe to this event, react to it.

@Output() allow you to spread these events to parent components :

child.Component.ts

  @Output() myEvent: EventEmitter<string> = new EventEmitter<string>();

parent.component.ts

<app-child-component (myEvent)="reactToChildEvent($event)"></app-child-component>

EDIT :

You can use EventEmitter alone, without @Ouput() , to emit from a service to all subscribed components, or inside the same component.