+
+ |
+ Observable |
+ Events API |
+
+
+ | Creation & cancellation |
+
+// Setup
+let clicks$ = fromEvent(buttonEl, ‘click’);
+// Begin listening
+let subscription = clicks$
+ .subscribe(e => console.log(‘Clicked’, e))
+// Stop listening
+subscription.unsubscribe();
+ |
+
+function handler(e) {
+ console.log(‘Clicked’, e);
+}
+// Setup & begin listening
+button.addEventListener(‘click’, handler);
+// Stop listening
+button.removeEventListener(‘click’, handler);
+
+ |
+
+
+ | Subscription |
+
+observable.subscribe(() => {
+ // notification handlers here
+});
+ |
+
+element.addEventListener(eventName, (event) => {
+ // notification handler here
+});
+ |
+
+
+ | Configuration |
+ Listen for keystrokes, but provide a stream representing the value in the input.
+fromEvent(inputEl, 'keydown').pipe(
+ map(e => e.target.value)
+);
+ |
+ Does not support configuration.
+element.addEventListener(eventName, (event) => {
+ // Cannot change the passed Event into another
+ // value before it gets to the handler
+});
+ |
+
+
+
+
+## Observables compared to arrays
+
+An observable produces values over time. An array is created as a static set of values. In a sense, observables are asynchronous where arrays are synchronous. In the following examples, ➞ implies asynchronous value delivery.
+
+
+
+ |
+ Observable |
+ Array |
+
+
+ | Given |
+
+ obs: ➞1➞2➞3➞5➞7
+ obsB: ➞'a'➞'b'➞'c'
+ |
+
+ arr: [1, 2, 3, 5, 7]
+ arrB: ['a', 'b', 'c']
+ |
+
+
+ concat() |
+
+ concat(obs, obsB)
+ ➞1➞2➞3➞5➞7➞'a'➞'b'➞'c'
+ |
+
+ arr.concat(arrB)
+ [1,2,3,5,7,'a','b','c']
+ |
+
+
+ filter() |
+
+ obs.pipe(filter((v) => v>3))
+ ➞5➞7
+ |
+
+ arr.filter((v) => v>3)
+ [5, 7]
+ |
+
+
+ find() |
+
+ obs.pipe(find((v) => v>3))
+ ➞5
+ |
+
+ arr.find((v) => v>3)
+ 5
+ |
+
+
+ findIndex() |
+
+ obs.pipe(findIndex((v) => v>3))
+ ➞3
+ |
+
+ arr.findIndex((v) => v>3)
+ 3
+ |
+
+
+ forEach() |
+
+ obs.pipe(tap((v) => {
+ console.log(v);
+}))
+1
+2
+3
+5
+7
+ |
+
+ arr.forEach((v) => {
+ console.log(v);
+})
+1
+2
+3
+5
+7
+ |
+
+
+ map() |
+
+ obs.pipe(map((v) => -v))
+ ➞-1➞-2➞-3➞-5➞-7
+ |
+
+ arr.map((v) => -v)
+ [-1, -2, -3, -5, -7]
+ |
+
+
+ reduce() |
+
+ obs.pipe(reduce((s,v)=> s+v, 0))
+ ➞18
+ |
+
+ arr.reduce((s,v) => s+v, 0)
+ 18
+ |
+
+
diff --git a/aio/content/guide/comparing-observables.md b/aio/content/guide/comparing-observables.md
index 7dd191ba95..1a748de767 100644
--- a/aio/content/guide/comparing-observables.md
+++ b/aio/content/guide/comparing-observables.md
@@ -1,25 +1,24 @@
-# Observables compared to other techniques
+# Observables en comparación con otras técnicas
-You can often use observables instead of promises to deliver values asynchronously. Similarly, observables can take the place of event handlers. Finally, because observables deliver multiple values, you can use them where you might otherwise build and operate on arrays.
+A menudo puedes usar observables en lugar de promesas para entregar valores de forma asíncrona. Del mismo modo, los observables pueden reemplazar a los controladores de eventos. Finalmente, porque los observables entregan múltiples valores, puedes usarlos donde de otro modo podrías construir y operar con arrays.
-Observables behave somewhat differently from the alternative techniques in each of these situations, but offer some significant advantages. Here are detailed comparisons of the differences.
+Los observables se comportan de manera algo diferente a las técnicas alternativas en cada una de estas situaciones, pero ofrecen algunas ventajas significativas. Aquí hay comparaciones detalladas de las diferencias.
-## Observables compared to promises
+## Observables en comparación con promesas
-Observables are often compared to promises. Here are some key differences:
+Los observables a menudo se comparan con las promesas. Aquí hay algunas diferencias clave:
-* Observables are declarative; computation does not start until subscription. Promises execute immediately on creation. This makes observables useful for defining recipes that can be run whenever you need the result.
+* Los observables son declarativos; La ejecución no comienza hasta la suscripción. Las promesas se ejecutan inmediatamente después de la creación. Esto hace que los observables sean útiles para definir recetas que se pueden ejecutar cuando necesites el resultado.
-* Observables provide many values. Promises provide one. This makes observables useful for getting multiple values over time.
+* Los observables proporcionan muchos valores. Las promesas proporcionan un valor. Esto hace que los observables sean útiles para obtener múltiples valores a lo largo del tiempo.
-* Observables differentiate between chaining and subscription. Promises only have `.then()` clauses. This makes observables useful for creating complex transformation recipes to be used by other part of the system, without causing the work to be executed.
+* Los observables diferencian entre encadenamiento y suscripción. Las promesas solo tienen cláusulas `.then ()`. Esto hace que los observables sean útiles para crear recetas de transformación complejas para ser utilizadas por otra parte del sistema, sin que el trabajo se ejecute.
-* Observables `subscribe()` is responsible for handling errors. Promises push errors to the child promises. This makes observables useful for centralized and predictable error handling.
+* Observables `subscribe()` es responsable de manejar los errores. Las promesas empujan los errores a promesas hijas. Esto hace que los observables sean útiles para el manejo centralizado y predecible de errores.
+### Creación y suscripción
-### Creation and subscription
-
-* Observables are not executed until a consumer subscribes. The `subscribe()` executes the defined behavior once, and it can be called again. Each subscription has its own computation. Resubscription causes recomputation of values.
+* Los observables no se ejecutan hasta que un consumidor se suscribe. El `subscribe()` ejecuta el comportamiento definido una vez, y se puede volver a llamar. Cada suscripción tiene su propia computación. La resuscripción provoca la recomputación de los valores.