RxJS interop with component and directive outputs

The @angular/rxjs-interop package offers two APIs related to component and directive outputs.

Creating an output based on an RxJs Observable

The outputFromObservable lets you create a component or directive output that emits based on an RxJS observable:

import {Directive} from '@angular/core';
import {outputFromObservable} from '@angular/core/rxjs-interop';

@Directive(/* ... */)
class Draggable {
  pointerMoves$: Observable<PointerMovements> = listenToPointerMoves();

  // Whenever `pointerMoves$` emits, the `pointerMove` event fires.
  pointerMove = outputFromObservable(this.pointerMoves$);
}

The outputFromObservable function has special meaning to the Angular compiler. You may only call outputFromObservable in component and directive property initializers.

When you subscribe to the output, Angular automatically forwards the subscription to the underlying observable. Angular stops forwarding values when the component or directive is destroyed.

Creating an RxJS Observable from a component or directive output

The outputToObservable function lets you create an RxJS observable from a component output.

import {outputToObservable} from '@angular/core/rxjs-interop';

@Component(/*...*/)
class CustomSlider {
    valueChange = output<number>();
}

// Instance reference to `CustomSlider`.
const slider: CustomSlider = createSlider();

outputToObservable(slider.valueChange) // Observable<number>
    .pipe(...)
    .subscribe(...);