DEV Community

loading...

Streaming the Angular @Output()

realtomaszkula profile image Tomasz Kula Originally published at upbeat.dev ・1 min read

main

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>();
Enter fullscreen mode Exit fullscreen mode

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()
  );
Enter fullscreen mode Exit fullscreen mode

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

Discussion (1)

pic
Editor guide
Collapse
igabesz profile image
Gábor IMRE

Sweet!