Skip to content

Commit 5005132

Browse files
ricardochlSplaktar
authored andcommitted
translate: translations for RxJs Interop guides
- Add Spanish translations for ecosystem/rxjs-interop guides and update navigation labels Fixes #72
1 parent ce1a165 commit 5005132

File tree

7 files changed

+326
-70
lines changed

7 files changed

+326
-70
lines changed

adev-es/src/app/routing/sub-navigation-data.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1101,17 +1101,17 @@ const DOCS_SUB_NAVIGATION_DATA: NavigationItem[] = [
11011101
label: 'Using RxJS with Angular',
11021102
children: [
11031103
{
1104-
label: 'Signals interop',
1104+
label: 'Interoperabilidad con signals',
11051105
path: 'ecosystem/rxjs-interop',
11061106
contentPath: 'ecosystem/rxjs-interop/signals-interop',
11071107
},
11081108
{
1109-
label: 'Component output interop',
1109+
label: 'Interoperabilidad con outputs de componentes',
11101110
path: 'ecosystem/rxjs-interop/output-interop',
11111111
contentPath: 'ecosystem/rxjs-interop/output-interop',
11121112
},
11131113
{
1114-
label: 'Unsubscribing with takeUntilDestroyed',
1114+
label: 'Cancelar suscripciones con takeUntilDestroyed',
11151115
path: 'ecosystem/rxjs-interop/take-until-destroyed',
11161116
contentPath: 'ecosystem/rxjs-interop/take-until-destroyed',
11171117
},
Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
# RxJS interop with component and directive outputs
2+
3+
TIP: This guide assumes you're familiar with [component and directive outputs](guide/components/outputs).
4+
5+
The `@angular/rxjs-interop` package offers two APIs related to component and directive outputs.
6+
7+
## Creating an output based on an RxJs Observable
8+
9+
The `outputFromObservable` lets you create a component or directive output that emits based on an RxJS observable:
10+
11+
```ts {highlight:[9]}
12+
import {Directive} from '@angular/core';
13+
import {outputFromObservable} from '@angular/core/rxjs-interop';
14+
15+
@Directive({/*...*/})
16+
class Draggable {
17+
pointerMoves$: Observable<PointerMovements> = listenToPointerMoves();
18+
19+
// Whenever `pointerMoves$` emits, the `pointerMove` event fires.
20+
pointerMove = outputFromObservable(this.pointerMoves$);
21+
}
22+
```
23+
24+
The `outputFromObservable` function has special meaning to the Angular compiler. **You may only call `outputFromObservable` in component and directive property initializers.**
25+
26+
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.
27+
28+
HELPFUL: Consider using `output()` directly if you can emit values imperatively.
29+
30+
## Creating an RxJS Observable from a component or directive output
31+
32+
The `outputToObservable` function lets you create an RxJS observable from a component output.
33+
34+
```ts {highlight:[11]}
35+
import {outputToObservable} from '@angular/core/rxjs-interop';
36+
37+
@Component(/*...*/)
38+
class CustomSlider {
39+
valueChange = output<number>();
40+
}
41+
42+
// Instance reference to `CustomSlider`.
43+
const slider: CustomSlider = createSlider();
44+
45+
outputToObservable(slider.valueChange) // Observable<number>
46+
.pipe(...)
47+
.subscribe(...);
48+
```
49+
50+
HELPFUL: Consider using the `subscribe` method on `OutputRef` directly if it meets your needs.
Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
1-
# RxJS interop with component and directive outputs
1+
# Interoperabilidad de RxJS con outputs de componentes y directivas
22

3-
TIP: This guide assumes you're familiar with [component and directive outputs](guide/components/outputs).
3+
CONSEJO: Esta guía supone que ya estás familiarizado con los [outputs de componentes y directivas](guide/components/outputs).
44

5-
The `@angular/rxjs-interop` package offers two APIs related to component and directive outputs.
5+
El paquete `@angular/rxjs-interop` ofrece dos APIs relacionadas con los outputs de componentes y directivas.
66

7-
## Creating an output based on an RxJs Observable
7+
## Crear un output basado en un Observable de RxJS
88

9-
The `outputFromObservable` lets you create a component or directive output that emits based on an RxJS observable:
9+
`outputFromObservable` te permite crear un output de componente o directiva que emite en función de un Observable de RxJS:
1010

1111
```ts {highlight:[9]}
1212
import {Directive} from '@angular/core';
@@ -15,21 +15,21 @@ import {outputFromObservable} from '@angular/core/rxjs-interop';
1515
@Directive({/*...*/})
1616
class Draggable {
1717
pointerMoves$: Observable<PointerMovements> = listenToPointerMoves();
18-
19-
// Whenever `pointerMoves$` emits, the `pointerMove` event fires.
18+
19+
// Cada vez que `pointerMoves$` emite, se dispara el evento `pointerMove`.
2020
pointerMove = outputFromObservable(this.pointerMoves$);
2121
}
2222
```
2323

24-
The `outputFromObservable` function has special meaning to the Angular compiler. **You may only call `outputFromObservable` in component and directive property initializers.**
24+
La función `outputFromObservable` tiene un significado especial para el compilador de Angular. **Solo puedes llamar a `outputFromObservable` en inicializadores de propiedades de componentes y directivas.**
2525

26-
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.
26+
Cuando te suscribes (`subscribe`) al output, Angular reenvía automáticamente la suscripción al Observable subyacente. Angular deja de reenviar valores cuando el componente o la directiva se destruye.
2727

28-
HELPFUL: Consider using `output()` directly if you can emit values imperatively.
28+
ÚTIL: Considera usar `output()` directamente si puedes emitir valores de forma imperativa.
2929

30-
## Creating an RxJS Observable from a component or directive output
30+
## Crear un Observable de RxJS a partir de un output de componente o directiva
3131

32-
The `outputToObservable` function lets you create an RxJS observable from a component output.
32+
La función `outputToObservable` te permite crear un Observable de RxJS a partir de un output de componente.
3333

3434
```ts {highlight:[11]}
3535
import {outputToObservable} from '@angular/core/rxjs-interop';
@@ -39,12 +39,12 @@ import {outputToObservable} from '@angular/core/rxjs-interop';
3939
valueChange = output<number>();
4040
}
4141

42-
// Instance reference to `CustomSlider`.
42+
// Referencia de instancia a `CustomSlider`.
4343
const slider: CustomSlider = createSlider();
4444

4545
outputToObservable(slider.valueChange) // Observable<number>
4646
.pipe(...)
4747
.subscribe(...);
4848
```
4949

50-
HELPFUL: Consider using the `subscribe` method on `OutputRef` directly if it meets your needs.
50+
ÚTIL: Considera usar directamente el método `subscribe` en `OutputRef` si satisface tus necesidades.
Lines changed: 160 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,160 @@
1+
# RxJS interop with Angular signals
2+
3+
The `@angular/core/rxjs-interop` package offers APIs that help you integrate RxJS and Angular signals.
4+
5+
## Create a signal from an RxJs Observable with `toSignal`
6+
7+
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.
8+
9+
```angular-ts
10+
import { Component } from '@angular/core';
11+
import { AsyncPipe } from '@angular/common';
12+
import { interval } from 'rxjs';
13+
import { toSignal } from '@angular/core/rxjs-interop';
14+
15+
@Component({
16+
template: `{{ counter() }}`,
17+
})
18+
export class Ticker {
19+
counterObservable = interval(1000);
20+
21+
// Get a `Signal` representing the `counterObservable`'s value.
22+
counter = toSignal(this.counterObservable, {initialValue: 0});
23+
}
24+
```
25+
26+
Like the `async` pipe, `toSignal` subscribes to the Observable immediately, which may trigger side effects. The subscription created by `toSignal` automatically unsubscribes from the given Observable when the component or service which calls `toSignal` is destroyed.
27+
28+
IMPORTANT: `toSignal` creates a subscription. You should avoid calling it repeatedly for the same Observable, and instead reuse the signal it returns.
29+
30+
### Injection context
31+
32+
`toSignal` by default needs to run in an [injection context](guide/di/dependency-injection-context), such as during construction of a component or service. If an injection context is not available, you can manually specify the `Injector` to use instead.
33+
34+
### Initial values
35+
36+
Observables may not produce a value synchronously on subscription, but signals always require a current value. There are several ways to deal with this "initial" value of `toSignal` signals.
37+
38+
#### The `initialValue` option
39+
40+
As in the example above, you can specify an `initialValue` option with the value the signal should return before the Observable emits for the first time.
41+
42+
#### `undefined` initial values
43+
44+
If you don't provide an `initialValue`, the resulting signal will return `undefined` until the Observable emits. This is similar to the `async` pipe's behavior of returning `null`.
45+
46+
#### The `requireSync` option
47+
48+
Some Observables are guaranteed to emit synchronously, such as `BehaviorSubject`. In those cases, you can specify the `requireSync: true` option.
49+
50+
When `requiredSync` is `true`, `toSignal` enforces that the Observable emits synchronously on subscription. This guarantees that the signal always has a value, and no `undefined` type or initial value is required.
51+
52+
### `manualCleanup`
53+
54+
By default, `toSignal` automatically unsubscribes from the Observable when the component or service that creates it is destroyed.
55+
56+
To override this behavior, you can pass the `manualCleanup` option. You can use this setting for Observables that complete themselves naturally.
57+
58+
#### Custom equality comparison
59+
60+
Some observables may emit values that are **equals** even though they differ by reference or minor detail. The `equal` option lets you define a **custom equal function** to determine when two consecutive values should be considered the same.
61+
62+
When two emitted values are considered equal, the resulting signal **does not update**. This prevents redundant computations, DOM updates, or effects from re-running unnecessarily.
63+
64+
```ts
65+
import { Component } from '@angular/core';
66+
import { toSignal } from '@angular/core/rxjs-interop';
67+
import { interval, map } from 'rxjs';
68+
69+
@Component(/* ... */)
70+
export class EqualExample {
71+
temperature$ = interval(1000).pipe(
72+
map(() => ({ temperature: Math.floor(Math.random() * 3) + 20 }) ) // 20, 21, or 22 randomly
73+
);
74+
75+
// Only update if the temperature changes
76+
temperature = toSignal(this.temperature$, {
77+
initialValue: { temperature : 20 },
78+
equal: (prev, curr) => prev.temperature === curr.temperature
79+
});
80+
}
81+
```
82+
83+
### Error and Completion
84+
85+
If an Observable used in `toSignal` produces an error, that error is thrown when the signal is read.
86+
87+
If an Observable used in `toSignal` completes, the signal continues to return the most recently emitted value before completion.
88+
89+
## Create an RxJS Observable from a signal with `toObservable`
90+
91+
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.
92+
93+
```ts
94+
import { Component, signal } from '@angular/core';
95+
import { toObservable } from '@angular/core/rxjs-interop';
96+
97+
@Component(/* ... */)
98+
export class SearchResults {
99+
query: Signal<string> = inject(QueryService).query;
100+
query$ = toObservable(this.query);
101+
102+
results$ = this.query$.pipe(
103+
switchMap(query => this.http.get('/search?q=' + query ))
104+
);
105+
}
106+
```
107+
108+
As the `query` signal changes, the `query$` Observable emits the latest query and triggers a new HTTP request.
109+
110+
### Injection context
111+
112+
`toObservable` by default needs to run in an [injection context](guide/di/dependency-injection-context), such as during construction of a component or service. If an injection context is not available, you can manually specify the `Injector` to use instead.
113+
114+
### Timing of `toObservable`
115+
116+
`toObservable` uses an effect to track the value of the signal in a `ReplaySubject`. On subscription, the first value (if available) may be emitted synchronously, and all subsequent values will be asynchronous.
117+
118+
Unlike Observables, signals never provide a synchronous notification of changes. Even if you update a signal's value multiple times, `toObservable` will only emit the value after the signal stabilizes.
119+
120+
```ts
121+
const obs$ = toObservable(mySignal);
122+
obs$.subscribe(value => console.log(value));
123+
124+
mySignal.set(1);
125+
mySignal.set(2);
126+
mySignal.set(3);
127+
```
128+
129+
Here, only the last value (3) will be logged.
130+
131+
## Using `rxResource` for async data
132+
133+
IMPORTANT: `rxResource` is [experimental](reference/releases#experimental). It's ready for you to try, but it might change before it is stable.
134+
135+
Angular's [`resource` function](/guide/signals/resource) gives you a way to incorporate async data into your application's signal-based code. Building on top of this pattern, `rxResource` lets you define a resource where the source of your data is defined in terms of an RxJS `Observable`. Instead of accepting a `loader` function, `rxResource` accepts a `stream` function that accepts an RxJS `Observable`.
136+
137+
```typescript
138+
import {Component, inject} from '@angular/core';
139+
import {rxResource} from '@angular/core/rxjs-interop';
140+
141+
@Component(/* ... */)
142+
export class UserProfile {
143+
// This component relies on a service that exposes data through an RxJS Observable.
144+
private userData = inject(MyUserDataClient);
145+
146+
protected userId = input<string>();
147+
148+
private userResource = rxResource({
149+
params: () => ({ userId: this.userId() }),
150+
151+
// The `stream` property expects a factory function that returns
152+
// a data stream as an RxJS Observable.
153+
stream: ({params}) => this.userData.load(params.userId),
154+
});
155+
}
156+
```
157+
158+
The `stream` property accepts a factory function for an RxJS `Observable`. This factory function is passed the resource's `params` value and returns an `Observable`. The resource calls this factory function every time the `params` computation produces a new value. See [Resource loaders](/guide/signals/resource#resource-loaders) for more details on the parameters passed to the factory function.
159+
160+
In all other ways, `rxResource` behaves like and provides the same APIs as `resource` for specifying parameters, reading values, checking loading state, and examining errors.

0 commit comments

Comments
 (0)