Interopérabilité RxJS avec les outputs de composants et de directives

Le package @angular/core/rxjs-interop propose deux API liées aux outputs de composants et de directives.

Créer un output à partir d'un observable RxJS

La fonction outputFromObservable vous permet de créer un output de composant ou de directive qui émet en fonction d'un observable RxJS :

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

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

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

La fonction outputFromObservable a une signification particulière pour le compilateur Angular. Vous ne pouvez appeler outputFromObservable que dans les initialiseurs de propriétés de composants et de directives.

Lorsque vous vous abonnez (subscribe) à l'output, Angular transmet automatiquement l'abonnement à l'observable sous-jacent. Angular cesse de transmettre les valeurs lorsque le composant ou la directive est détruit.

Créer un observable RxJS à partir d'un output de composant ou de directive

La fonction outputToObservable vous permet de créer un observable RxJS à partir d'un output de composant.

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

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

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

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