RxJS interop с output компонентов и директив

Пакет @angular/rxjs-interop предлагает два API, связанных с output компонентов и директив.

Создание output на основе RxJS Observable

outputFromObservable позволяет создать output компонента или директивы, который эмитит на основе 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$);
}

Функция outputFromObservable имеет особое значение для компилятора Angular. Вызывать outputFromObservable можно только в инициализаторах свойств компонентов и директив.

Когда вы subscribe на output, Angular автоматически пробрасывает подписку в нижележащий Observable. Angular прекращает проброс значений при уничтожении компонента или директивы.

Создание RxJS Observable из output компонента или директивы

Функция outputToObservable позволяет создать RxJS Observable из 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(...);