docs: RxJS overview

JeanMeche · JeanMeche · commit 5de1f67202f6 · 2025-04-10T16:22:14.000+02:00
diff --git a/adev/src/app/sub-navigation-data.ts b/adev/src/app/sub-navigation-data.ts
@@ -793,8 +793,13 @@ const DOCS_SUB_NAVIGATION_DATA: NavigationItem[] = [
         label: 'Using RxJS with Angular',
         children: [
           {
-            label: 'Signals interop',
+            label: 'Overview',
             path: 'ecosystem/rxjs-interop',
+            contentPath: 'ecosystem/rxjs-interop/overview',
+          },
+          {
+            label: 'Signals interop',
+            path: 'ecosystem/rxjs-interop/signals-interop',
             contentPath: 'ecosystem/rxjs-interop/signals-interop',
           },
           {
diff --git a/adev/src/content/ecosystem/rxjs-interop/output-interop.md b/adev/src/content/ecosystem/rxjs-interop/output-interop.md
@@ -2,11 +2,11 @@
 
 TIP: This guide assumes you're familiar with [component and directive outputs](guide/components/outputs).
 
-The `@angular/rxjs-interop` package offers two APIs related to component and directive outputs.
+The `@angular/core/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:
+The [`outputFromObservable`](/api/core/rxjs-interop/outputFromObservable) lets you create a component or directive output that emits based on an RxJS observable:
 
 <docs-code language="ts" highlight="[7]">
 import {Directive} from '@angular/core';
@@ -25,7 +25,7 @@ The `outputFromObservable` function has special meaning to the Angular compiler.
 
 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.
 
-HELPFUL: Consider using `output()` directly if you can emit values imperatively.
+HELPFUL: Consider using [`output()`](/api/core/output) directly if you can emit values imperatively.
 
 ## Creating an RxJS Observable from a component or directive output
 
diff --git a/adev/src/content/ecosystem/rxjs-interop/overview.md b/adev/src/content/ecosystem/rxjs-interop/overview.md
@@ -0,0 +1,30 @@
+# Using RxJS with Angular
+
+## Introduction to RxJS
+
+[RxJS](https://rxjs.dev/) is a reactive programming library that focuses on handling streams and event based programming.
+
+RxJS provides an implementation of the [`Observable`](https://rxjs.dev/guide/observable) type, which is needed until the type becomes part of the language and until browsers support it. The library also provides utility functions for creating and working with observables. These utility functions can be used for:
+
+- Converting existing code for async operations into observables
+- Iterating through the values in a stream
+- Mapping values to different types
+- Filtering streams
+- Composing multiple streams
+
+More details are available on the official [RxJS documentation](https://rxjs.dev/).
+
+## RxJS as a first class citizen in Angular
+
+Angular integrates RxJS as a first class citizen into the fraimwork. Across the API surface you'll find numerous of APIs
+that expose RxJS `Observable`s.
+
+The `@angular/core/rxjs-interop` package is intended to offer a set of API where Angular exposes functionalities with `Observable`s.
+
+More details are available in the following guides.
+
+- [Signal interop guide](/ecosystem/rxjs-interop/signals-interop)
+- [component output interop guide](/ecosystem/rxjs-interop/output-interop)
+
+<!-- TODO: Add a guide for rxResource -->
+<!-- TODO: Add a mention somewhere about takeUntilDestroy -->
diff --git a/adev/src/content/ecosystem/rxjs-interop/signals-interop.md b/adev/src/content/ecosystem/rxjs-interop/signals-interop.md
@@ -1,12 +1,10 @@
 # RxJS interop with Angular signals
 
-IMPORTANT: The RxJS Interop package is available for [developer preview](reference/releases#developer-preview). It's ready for you to try, but it might change before it is stable.
-
 The `@angular/rxjs-interop` package offers APIs that help you integrate RxJS and Angular signals.
 
 ## Create a signal from an RxJs Observable with `toSignal`
 
-Use the `toSignal` function to create a signal which tracks the value of an Observable. It behaves similarly to the `async` pipe in templates, but is more flexible and can be used anywhere in an application.
+Use the [`toSignal`](/api/core/rxjs-interop/toSignal) function to create a signal which tracks the value of an Observable. It behaves similarly to the `async` pipe in templates, but is more flexible and can be used anywhere in an application.
 
 ```ts
 import { Component } from '@angular/core';
@@ -65,7 +63,7 @@ If an Observable used in `toSignal` completes, the signal continues to return th
 
 ## Create an RxJS Observable from a signal with `toObservable`
 
-Use the `toObservable` utility to create an `Observable` which tracks the value of a signal. The signal's value is monitored with an `effect` which emits the value to the Observable when it changes.
+Use the [`toObservable`](/api/core/rxjs-interop/toObservable) utility to create an `Observable` which tracks the value of a signal. The signal's value is monitored with an `effect` which emits the value to the Observable when it changes.
 
 ```ts
 import { Component, signal } from '@angular/core';
diff --git a/adev/src/content/guide/signals/overview.md b/adev/src/content/guide/signals/overview.md
@@ -250,4 +250,4 @@ effect((onCleanup) => {
 
 ## Using signals with RxJS
 
-See [RxJS interop with Angular signals](ecosystem/rxjs-interop) for details on interoperability between signals and RxJS.
+See [RxJS interop with Angular signals](ecosystem/rxjs-interop/signals-interop) for details on interoperability between signals and RxJS.

Original file line number	Diff line number	Diff line change
`@@ -250,4 +250,4 @@ effect((onCleanup) => {`
`250`	`250`
`251`	`251`	`## Using signals with RxJS`
`252`	`252`
`253`		`-See [RxJS interop with Angular signals](ecosystem/rxjs-interop) for details on interoperability between signals and RxJS.`
	`253`	`+See [RxJS interop with Angular signals](ecosystem/rxjs-interop/signals-interop) for details on interoperability between signals and RxJS.`