diff --git a/adev-es/src/app/routing/sub-navigation-data.ts b/adev-es/src/app/routing/sub-navigation-data.ts
index d8090d2..f86a208 100644
--- a/adev-es/src/app/routing/sub-navigation-data.ts
+++ b/adev-es/src/app/routing/sub-navigation-data.ts
@@ -956,17 +956,17 @@ const DOCS_SUB_NAVIGATION_DATA: NavigationItem[] = [
label: 'Using RxJS with Angular',
children: [
{
- label: 'Signals interop',
+ label: 'Interoperabilidad con signals',
path: 'ecosystem/rxjs-interop',
contentPath: 'ecosystem/rxjs-interop/signals-interop',
},
{
- label: 'Component output interop',
+ label: 'Interoperabilidad con outputs de componentes',
path: 'ecosystem/rxjs-interop/output-interop',
contentPath: 'ecosystem/rxjs-interop/output-interop',
},
{
- label: 'Unsubscribing with takeUntilDestroyed',
+ label: 'Cancelar suscripciones con takeUntilDestroyed',
path: 'ecosystem/rxjs-interop/take-until-destroyed',
contentPath: 'ecosystem/rxjs-interop/take-until-destroyed',
},
diff --git a/adev-es/src/content/ecosystem/rxjs-interop/output-interop.en.md b/adev-es/src/content/ecosystem/rxjs-interop/output-interop.en.md
new file mode 100644
index 0000000..207a1f6
--- /dev/null
+++ b/adev-es/src/content/ecosystem/rxjs-interop/output-interop.en.md
@@ -0,0 +1,50 @@
+# RxJS interop with component and directive outputs
+
+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.
+
+## 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 = 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.
+
+HELPFUL: Consider using `output()` directly if you can emit values imperatively.
+
+## 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();
+}
+
+// Instance reference to `CustomSlider`.
+const slider: CustomSlider = createSlider();
+
+outputToObservable(slider.valueChange) // Observable
+ .pipe(...)
+ .subscribe(...);
+
+
+HELPFUL: Consider using the `subscribe` method on `OutputRef` directly if it meets your needs.
diff --git a/adev-es/src/content/ecosystem/rxjs-interop/output-interop.md b/adev-es/src/content/ecosystem/rxjs-interop/output-interop.md
index 207a1f6..7057f6f 100644
--- a/adev-es/src/content/ecosystem/rxjs-interop/output-interop.md
+++ b/adev-es/src/content/ecosystem/rxjs-interop/output-interop.md
@@ -1,12 +1,12 @@
-# RxJS interop with component and directive outputs
+# Interoperabilidad de RxJS con outputs de componentes y directivas
-TIP: This guide assumes you're familiar with [component and directive outputs](guide/components/outputs).
+CONSEJO: Esta guía supone que ya estás familiarizado con los [outputs de componentes y directivas](guide/components/outputs).
-The `@angular/rxjs-interop` package offers two APIs related to component and directive outputs.
+El paquete `@angular/rxjs-interop` ofrece dos APIs relacionadas con los outputs de componentes y directivas.
-## Creating an output based on an RxJs Observable
+## Crear un output basado en un Observable de RxJS
-The `outputFromObservable` lets you create a component or directive output that emits based on an RxJS observable:
+`outputFromObservable` te permite crear un output de componente o directiva que emite en función de un Observable de RxJS:
import {Directive} from '@angular/core';
@@ -16,20 +16,20 @@ import {outputFromObservable} from '@angular/core/rxjs-interop';
class Draggable {
pointerMoves$: Observable = listenToPointerMoves();
- // Whenever `pointerMoves$` emits, the `pointerMove` event fires.
+ // Cada vez que `pointerMoves$` emite, se dispara el evento `pointerMove`.
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.**
+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.**
-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.
+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.
-HELPFUL: Consider using `output()` directly if you can emit values imperatively.
+ÚTIL: Considera usar `output()` directamente si puedes emitir valores de forma imperativa.
-## Creating an RxJS Observable from a component or directive output
+## Crear un Observable de RxJS a partir de un output de componente o directiva
-The `outputToObservable` function lets you create an RxJS observable from a component output.
+La función `outputToObservable` te permite crear un Observable de RxJS a partir de un output de componente.
import {outputToObservable} from '@angular/core/rxjs-interop';
@@ -39,7 +39,7 @@ class CustomSlider {
valueChange = output();
}
-// Instance reference to `CustomSlider`.
+// Referencia de instancia a `CustomSlider`.
const slider: CustomSlider = createSlider();
outputToObservable(slider.valueChange) // Observable
@@ -47,4 +47,4 @@ outputToObservable(slider.valueChange) // Observable
.subscribe(...);
-HELPFUL: Consider using the `subscribe` method on `OutputRef` directly if it meets your needs.
+ÚTIL: Considera usar directamente el método `subscribe` en `OutputRef` si satisface tus necesidades.
diff --git a/adev-es/src/content/ecosystem/rxjs-interop/signals-interop.en.md b/adev-es/src/content/ecosystem/rxjs-interop/signals-interop.en.md
new file mode 100644
index 0000000..210311c
--- /dev/null
+++ b/adev-es/src/content/ecosystem/rxjs-interop/signals-interop.en.md
@@ -0,0 +1,135 @@
+# RxJS interop with Angular signals
+
+The `@angular/core/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.
+
+```ts
+import { Component } from '@angular/core';
+import { AsyncPipe } from '@angular/common';
+import { interval } from 'rxjs';
+import { toSignal } from '@angular/core/rxjs-interop';
+
+@Component({
+ template: `{{ counter() }}`,
+})
+export class Ticker {
+ counterObservable = interval(1000);
+
+ // Get a `Signal` representing the `counterObservable`'s value.
+ counter = toSignal(this.counterObservable, {initialValue: 0});
+}
+```
+
+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.
+
+IMPORTANT: `toSignal` creates a subscription. You should avoid calling it repeatedly for the same Observable, and instead reuse the signal it returns.
+
+### Injection context
+
+`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.
+
+### Initial values
+
+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.
+
+#### The `initialValue` option
+
+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.
+
+#### `undefined` initial values
+
+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`.
+
+#### The `requireSync` option
+
+Some Observables are guaranteed to emit synchronously, such as `BehaviorSubject`. In those cases, you can specify the `requireSync: true` option.
+
+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.
+
+### `manualCleanup`
+
+By default, `toSignal` automatically unsubscribes from the Observable when the component or service that creates it is destroyed.
+
+To override this behavior, you can pass the `manualCleanup` option. You can use this setting for Observables that complete themselves naturally.
+
+### Error and Completion
+
+If an Observable used in `toSignal` produces an error, that error is thrown when the signal is read.
+
+If an Observable used in `toSignal` completes, the signal continues to return the most recently emitted value before completion.
+
+## 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.
+
+```ts
+import { Component, signal } from '@angular/core';
+import { toObservable } from '@angular/core/rxjs-interop';
+
+@Component(/* ... */)
+export class SearchResults {
+ query: Signal = inject(QueryService).query;
+ query$ = toObservable(this.query);
+
+ results$ = this.query$.pipe(
+ switchMap(query => this.http.get('/search?q=' + query ))
+ );
+}
+```
+
+As the `query` signal changes, the `query$` Observable emits the latest query and triggers a new HTTP request.
+
+### Injection context
+
+`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.
+
+### Timing of `toObservable`
+
+`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.
+
+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.
+
+```ts
+const obs$ = toObservable(mySignal);
+obs$.subscribe(value => console.log(value));
+
+mySignal.set(1);
+mySignal.set(2);
+mySignal.set(3);
+```
+
+Here, only the last value (3) will be logged.
+
+## Using `rxResource` for async data
+
+IMPORTANT: `rxResource` is [experimental](reference/releases#experimental). It's ready for you to try, but it might change before it is stable.
+
+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`.
+
+```typescript
+import {Component, inject} from '@angular/core';
+import {rxResource} from '@angular/core/rxjs-interop';
+
+@Component(/* ... */)
+export class UserProfile {
+ // This component relies on a service that exposes data through an RxJS Observable.
+ private userData = inject(MyUserDataClient);
+
+ protected userId = input();
+
+ private userResource = rxResource({
+ params: () => this.userId(),
+
+ // The `stream` property expects a factory function that returns
+ // a data stream as an RxJS Observable.
+ stream: ({params}) => this.userData.load(params.userId),
+ });
+}
+```
+
+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.
+
+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.
diff --git a/adev-es/src/content/ecosystem/rxjs-interop/signals-interop.md b/adev-es/src/content/ecosystem/rxjs-interop/signals-interop.md
index 210311c..61c21a9 100644
--- a/adev-es/src/content/ecosystem/rxjs-interop/signals-interop.md
+++ b/adev-es/src/content/ecosystem/rxjs-interop/signals-interop.md
@@ -1,10 +1,10 @@
-# RxJS interop with Angular signals
+# Interoperabilidad de RxJS con signals de Angular
-The `@angular/core/rxjs-interop` package offers APIs that help you integrate RxJS and Angular signals.
+El paquete `@angular/core/rxjs-interop` ofrece APIs que te ayudan a integrar RxJS y los signals de Angular.
-## Create a signal from an RxJs Observable with `toSignal`
+## Crea un signal a partir de un Observable de RxJS con `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.
+Usa la función `toSignal` para crear un signal que rastrea el valor de un Observable. Se comporta de forma similar al pipe `async` en las plantillas, pero es más flexible y puede utilizarse en cualquier parte de la aplicación.
```ts
import { Component } from '@angular/core';
@@ -18,52 +18,52 @@ import { toSignal } from '@angular/core/rxjs-interop';
export class Ticker {
counterObservable = interval(1000);
- // Get a `Signal` representing the `counterObservable`'s value.
+ // Obtiene un `Signal` que representa el valor de `counterObservable`.
counter = toSignal(this.counterObservable, {initialValue: 0});
}
```
-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.
+Al igual que el pipe `async`, `toSignal` se suscribe al Observable inmediatamente, lo cual puede desencadenar efectos secundarios. La suscripción creada por `toSignal` se da de baja automáticamente del Observable proporcionado cuando se destruye el componente o servicio que llama a `toSignal`.
-IMPORTANT: `toSignal` creates a subscription. You should avoid calling it repeatedly for the same Observable, and instead reuse the signal it returns.
+IMPORTANTE: `toSignal` crea una suscripción. Debes evitar llamarlo repetidamente para el mismo Observable y, en su lugar, reutilizar el signal que devuelve.
-### Injection context
+### Contexto de inyección
-`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.
+De manera predeterminada, `toSignal` necesita ejecutarse en un [contexto de inyección](guide/di/dependency-injection-context), como durante la construcción de un componente o servicio. Si no hay un contexto de inyección disponible, puedes especificar manualmente el `Injector` que debe utilizar.
-### Initial values
+### Valores iniciales
-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.
+Es posible que los Observables no produzcan un valor de forma síncrona al suscribirse, pero los signals siempre requieren un valor actual. Hay varias formas de manejar este valor "inicial" de los signals de `toSignal`.
-#### The `initialValue` option
+#### La opción `initialValue`
-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.
+Como en el ejemplo anterior, puedes especificar una opción `initialValue` con el valor que el signal debe devolver antes de que el Observable emita por primera vez.
-#### `undefined` initial values
+#### Valores iniciales `undefined`
-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`.
+Si no proporcionas un `initialValue`, el signal resultante devolverá `undefined` hasta que el Observable emita. Esto es similar al comportamiento del pipe `async`, que devuelve `null`.
-#### The `requireSync` option
+#### La opción `requireSync`
-Some Observables are guaranteed to emit synchronously, such as `BehaviorSubject`. In those cases, you can specify the `requireSync: true` option.
+Algunos Observables garantizan que emitirán de forma síncrona, por ejemplo, `BehaviorSubject`. En esos casos, puedes especificar la opción `requireSync: true`.
-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.
+Cuando `requireSync` es `true`, `toSignal` exige que el Observable emita de forma síncrona al suscribirse. Esto garantiza que el signal siempre tenga un valor y que no sea necesario un tipo `undefined` ni un valor inicial.
### `manualCleanup`
-By default, `toSignal` automatically unsubscribes from the Observable when the component or service that creates it is destroyed.
+De forma predeterminada, `toSignal` da de baja automáticamente del Observable cuando se destruye el componente o servicio que lo crea.
-To override this behavior, you can pass the `manualCleanup` option. You can use this setting for Observables that complete themselves naturally.
+Para reemplazar este comportamiento, puedes pasar la opción `manualCleanup`. Puedes utilizar este ajuste para Observables que se completan de forma natural.
-### Error and Completion
+### Error y finalización
-If an Observable used in `toSignal` produces an error, that error is thrown when the signal is read.
+Si un Observable usado en `toSignal` produce un error, dicho error se lanza cuando se lee el signal.
-If an Observable used in `toSignal` completes, the signal continues to return the most recently emitted value before completion.
+Si un Observable usado en `toSignal` se completa, el signal continúa devolviendo el valor emitido más recientemente antes de completarse.
-## Create an RxJS Observable from a signal with `toObservable`
+## Crea un Observable de RxJS a partir de un signal con `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.
+Usa la utilidad `toObservable` para crear un `Observable` que rastrea el valor de un signal. El valor del signal se supervisa con un `effect` que emite el valor al Observable cuando cambia.
```ts
import { Component, signal } from '@angular/core';
@@ -80,17 +80,17 @@ export class SearchResults {
}
```
-As the `query` signal changes, the `query$` Observable emits the latest query and triggers a new HTTP request.
+Cuando el signal `query` cambia, el Observable `query$` emite la consulta más reciente y desencadena una nueva solicitud HTTP.
-### Injection context
+### Contexto de inyección
-`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.
+De forma predeterminada, `toObservable` necesita ejecutarse en un [contexto de inyección](guide/di/dependency-injection-context), como durante la construcción de un componente o servicio. Si no hay un contexto de inyección disponible, puedes especificar manualmente el `Injector` que se debe utilizar.
-### Timing of `toObservable`
+### Sincronización de `toObservable`
-`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.
+`toObservable` utiliza un effect para rastrear el valor del signal en un `ReplaySubject`. Al suscribirse, el primer valor (si está disponible) puede emitirse de forma síncrona y todos los valores posteriores serán asíncronos.
-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.
+A diferencia de los Observables, los signals nunca proporcionan una notificación síncrona de los cambios. Incluso si actualizas el valor de un signal varias veces, `toObservable` solo emitirá el valor después de que el signal se estabilice.
```ts
const obs$ = toObservable(mySignal);
@@ -101,13 +101,13 @@ mySignal.set(2);
mySignal.set(3);
```
-Here, only the last value (3) will be logged.
+Aquí, solo se registrará el último valor (3).
-## Using `rxResource` for async data
+## Usar `rxResource` para datos asíncronos
-IMPORTANT: `rxResource` is [experimental](reference/releases#experimental). It's ready for you to try, but it might change before it is stable.
+IMPORTANTE: `rxResource` es [experimental](reference/releases#experimental). Está listo para que lo pruebes, pero podría cambiar antes de ser estable.
-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`.
+La [`resource` function](/guide/signals/resource) de Angular te permite incorporar datos asíncronos en el código de tu aplicación basado en signals. Sobre este patrón, `rxResource` te permite definir un recurso en el que la fuente de tus datos está definida en términos de un `Observable` de RxJS. En lugar de aceptar una función `loader`, `rxResource` acepta una función `stream` que recibe un `Observable` de RxJS.
```typescript
import {Component, inject} from '@angular/core';
@@ -115,7 +115,7 @@ import {rxResource} from '@angular/core/rxjs-interop';
@Component(/* ... */)
export class UserProfile {
- // This component relies on a service that exposes data through an RxJS Observable.
+ // Este componente depende de un servicio que expone datos a través de un Observable de RxJS.
private userData = inject(MyUserDataClient);
protected userId = input();
@@ -123,13 +123,13 @@ export class UserProfile {
private userResource = rxResource({
params: () => this.userId(),
- // The `stream` property expects a factory function that returns
- // a data stream as an RxJS Observable.
+ // La propiedad `stream` espera una función factory que devuelva
+ // un flujo de datos como un Observable de RxJS.
stream: ({params}) => this.userData.load(params.userId),
});
}
```
-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.
+La propiedad `stream` acepta una función factory para un `Observable` de RxJS. Esta función factory recibe el valor `params` del recurso y devuelve un `Observable`. El recurso llama a esta función cada vez que el cómputo de `params` produce un valor nuevo. Consulta [Resource loaders](/guide/signals/resource#resource-loaders) para más detalles sobre los parámetros que se pasan a la función factory.
-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.
+En todos los demás aspectos, `rxResource` se comporta como `resource` y proporciona las mismas APIs para especificar parámetros, leer valores, comprobar el estado de carga y examinar errores.
diff --git a/adev-es/src/content/ecosystem/rxjs-interop/take-until-destroyed.en.md b/adev-es/src/content/ecosystem/rxjs-interop/take-until-destroyed.en.md
new file mode 100644
index 0000000..17dc37a
--- /dev/null
+++ b/adev-es/src/content/ecosystem/rxjs-interop/take-until-destroyed.en.md
@@ -0,0 +1,46 @@
+# Unsubscribing with `takeUntilDestroyed`
+
+TIP: This guide assumes you're familiar with [component and directive lifecycle](guide/components/lifecycle).
+
+The `takeUntilDestroyed` operator, from `@angular/core/rxjs-interop`, provides a concise and reliable way to automatically unsubscribe from an Observable when a component or directive is destroyed. This prevents common memory leaks with RxJS subscriptions. It works similarly to the RxJS [`takeUntil`](https://rxjs.dev/api/operators/takeUntil) operator but without the need for a separate Subject.
+
+```typescript
+import {Component, inject} from '@angular/core';
+import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
+import {NotificationDispatcher, CustomPopupShower} from './some-shared-project-code';
+
+@Component(/* ... */)
+export class UserProfile {
+ private dispatcher = inject(NotificationDispatcher);
+ private popup = inject(CustomPopupShower);
+
+ constructor() {
+ // This subscription the 'notifications' Observable is automatically
+ // unsubscribed when the 'UserProfile' component is destroyed.
+ const messages: Observable = this.dispatcher.notifications;
+ messages.pipe(takeUntilDestroyed()).subscribe(message => {
+ this.popup.show(message);
+ });
+ }
+}
+```
+
+The `takeUntilDestroyed` operator accepts a single optional [`DestroyRef`](https://angular.dev/api/core/DestroyRef) argument. The operator uses `DestroyRef` to know when the component or directive has been destroyed. You can omit this argument when calling `takeUntilDestroyed` in an [injection context](https://angular.dev/guide/di/dependency-injection-context), typically the constructor of a component or directive. Always provide a `DestroyRef` if your code may call `takeUntilDestroyed` outside of an injection context.
+
+```typescript
+@Component(/* ... */)
+export class UserProfile {
+ private dispatcher = inject(NotificationDispatcher);
+ private popup = inject(CustomPopupShower);
+ private destroyRef = inject(DestroyRef);
+
+ startListeningToNotifications() {
+ // Always pass a `DestroyRef` if you call `takeUntilDestroyed` outside
+ // of an injection context.
+ const messages: Observable = this.dispatcher.notifications;
+ messages.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(message => {
+ this.popup.show(message);
+ });
+ }
+}
+```
diff --git a/adev-es/src/content/ecosystem/rxjs-interop/take-until-destroyed.md b/adev-es/src/content/ecosystem/rxjs-interop/take-until-destroyed.md
index 17dc37a..6d0ad87 100644
--- a/adev-es/src/content/ecosystem/rxjs-interop/take-until-destroyed.md
+++ b/adev-es/src/content/ecosystem/rxjs-interop/take-until-destroyed.md
@@ -1,8 +1,8 @@
-# Unsubscribing with `takeUntilDestroyed`
+# Cancelar suscripciones con `takeUntilDestroyed`
-TIP: This guide assumes you're familiar with [component and directive lifecycle](guide/components/lifecycle).
+CONSEJO: Esta guía supone que ya estás familiarizado con el [ciclo de vida de componentes y directivas](guide/components/lifecycle).
-The `takeUntilDestroyed` operator, from `@angular/core/rxjs-interop`, provides a concise and reliable way to automatically unsubscribe from an Observable when a component or directive is destroyed. This prevents common memory leaks with RxJS subscriptions. It works similarly to the RxJS [`takeUntil`](https://rxjs.dev/api/operators/takeUntil) operator but without the need for a separate Subject.
+El operador `takeUntilDestroyed`, de `@angular/core/rxjs-interop`, proporciona una forma concisa y confiable de cancelar automáticamente la suscripción a un Observable cuando un componente o directiva se destruye. Esto evita las fugas de memoria habituales con suscripciones de RxJS. Funciona de manera similar al operador [`takeUntil`](https://rxjs.dev/api/operators/takeUntil) de RxJS pero sin necesidad de un `Subject` adicional.
```typescript
import {Component, inject} from '@angular/core';
@@ -15,8 +15,8 @@ export class UserProfile {
private popup = inject(CustomPopupShower);
constructor() {
- // This subscription the 'notifications' Observable is automatically
- // unsubscribed when the 'UserProfile' component is destroyed.
+ // Esta suscripción al Observable `notifications` se da de baja automáticamente
+ // cuando el componente `UserProfile` se destruye.
const messages: Observable = this.dispatcher.notifications;
messages.pipe(takeUntilDestroyed()).subscribe(message => {
this.popup.show(message);
@@ -25,7 +25,7 @@ export class UserProfile {
}
```
-The `takeUntilDestroyed` operator accepts a single optional [`DestroyRef`](https://angular.dev/api/core/DestroyRef) argument. The operator uses `DestroyRef` to know when the component or directive has been destroyed. You can omit this argument when calling `takeUntilDestroyed` in an [injection context](https://angular.dev/guide/di/dependency-injection-context), typically the constructor of a component or directive. Always provide a `DestroyRef` if your code may call `takeUntilDestroyed` outside of an injection context.
+El operador `takeUntilDestroyed` acepta un único argumento opcional [`DestroyRef`](https://angular.dev/api/core/DestroyRef). El operador usa `DestroyRef` para saber cuándo el componente o la directiva se han destruido. Puedes omitir este argumento cuando llames a `takeUntilDestroyed` en un [contexto de inyección](https://angular.dev/guide/di/dependency-injection-context), normalmente el constructor de un componente o directiva. Proporciona siempre un `DestroyRef` si tu código puede llamar a `takeUntilDestroyed` fuera de un contexto de inyección.
```typescript
@Component(/* ... */)
@@ -35,8 +35,8 @@ export class UserProfile {
private destroyRef = inject(DestroyRef);
startListeningToNotifications() {
- // Always pass a `DestroyRef` if you call `takeUntilDestroyed` outside
- // of an injection context.
+ // Pasa siempre un `DestroyRef` si llamas a `takeUntilDestroyed` fuera
+ // de un contexto de inyección.
const messages: Observable = this.dispatcher.notifications;
messages.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(message => {
this.popup.show(message);
diff --git a/adev-es/src/content/ecosystem/service-workers/devops.md b/adev-es/src/content/ecosystem/service-workers/devops.md
index 4aea23e..2281011 100644
--- a/adev-es/src/content/ecosystem/service-workers/devops.md
+++ b/adev-es/src/content/ecosystem/service-workers/devops.md
@@ -1,142 +1,140 @@
-# Service worker devops
+# Devops del service worker
-This page is a reference for deploying and supporting production applications that use the Angular service worker.
-It explains how the Angular service worker fits into the larger production environment, the service worker's behavior under various conditions, and available resources and fail-safes.
+Esta página es una referencia para desplegar y dar soporte a aplicaciones en producción que usan el service worker de Angular.
+Explica cómo encaja el service worker de Angular en el entorno de producción, cuál es su comportamiento en distintas condiciones y qué recursos y mecanismos de seguridad están disponibles.
-## Service worker and caching of application resources
+## Service worker y almacenamiento en caché de los recursos de la aplicación
-Imagine the Angular service worker as a forward cache or a Content Delivery Network (CDN) edge that is installed in the end user's web browser.
-The service worker responds to requests made by the Angular application for resources or data from a local cache, without needing to wait for the network.
-Like any cache, it has rules for how content is expired and updated.
+Imagina el service worker de Angular como una caché de reenvío o como un CDN en el borde instalado en el navegador del usuario final.
+El service worker responde a las solicitudes que hace la aplicación Angular de recursos o datos desde una caché local, sin necesidad de esperar a la red.
+Como cualquier caché, tiene reglas sobre cómo caduca el contenido y cómo se actualiza.
-### Application versions
+### Versiones de la aplicación
-In the context of an Angular service worker, a "version" is a collection of resources that represent a specific build of the Angular application.
-Whenever a new build of the application is deployed, the service worker treats that build as a new version of the application.
-This is true even if only a single file is updated.
-At any given time, the service worker might have multiple versions of the application in its cache and it might be serving them simultaneously.
-For more information, see the [Application tabs](#application-tabs) section.
+En el contexto de un service worker de Angular, una "versión" es un conjunto de recursos que representan una compilación específica de la aplicación Angular.
+Cada vez que se despliega una nueva compilación de la aplicación, el service worker trata esa compilación como una nueva versión.
+Esto es cierto incluso si solo se actualizó un archivo.
+En un momento dado, el service worker puede tener varias versiones de la aplicación en su caché y podría estar sirviéndolas simultáneamente.
+Para obtener más información, consulta la sección [Pestañas de la aplicación](#application-tabs).
-To preserve application integrity, the Angular service worker groups all files into a version together.
-The files grouped into a version usually include HTML, JS, and CSS files.
-Grouping of these files is essential for integrity because HTML, JS, and CSS files frequently refer to each other and depend on specific content.
-For example, an `index.html` file might have a `