Streaming the Angular @Output()

We all know and love the @Output() decorator. If you are working with Angular I'm sure you've done this before:

@Output()
change = new EventEmitter<ChangeEvent>();

However, the lesser known fact is, that the property decorated by the @Output does not have to be an EventEmitter.

In fact, it can be an RxJS Observable. It opens up a lot of possibilities, because we can wield the full power of RxJS operators 😱

For example, you can have an Output() decorating your reactive form control's valueChanges stream.

control = new FormControl('');

@Output()
valueChages$ = this.control.valueChanges
  .pipe(
     distinctUntilChanged()
  );

Here you can see I'm limiting the emitted values to only the distinct ones, but other operators such as debounceTime could be used as well.

Hope you're having a great one, and I'll see you for more 60 Seconds of Angular posts in the future 🥳

Live demo