DEV Community

Tomasz Kula
Tomasz Kula

Posted on • Originally published at upbeat.dev

Streaming the Angular @Output()

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

Top comments (1)

Collapse
 
igabesz profile image
Gábor IMRE

Sweet!