+ |
+ | 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() |
+
+ obs.concat(obsB)
+ ➞1➞2➞3➞5➞7➞'a'➞'b'➞'c'
+ |
+
+ arr.concat(arrB)
+ [1,2,3,5,7,'a','b','c']
+ |
+
+
+ filter() |
+
+ obs.filter((v) => v>3)
+ ➞5➞7
+ |
+
+ arr.filter((v) => v>3)
+ [5, 7]
+ |
+
+
+ find() |
+
+ obs.find((v) => v>3)
+ ➞5
+ |
+
+ arr.find((v) => v>10)
+ 5
+ |
+
+
+ findIndex() |
+
+ obs.findIndex((v) => v>3)
+ ➞3
+ |
+
+ arr.findIndex((v) => v>3)
+ 3
+ |
+
+
+ forEach() |
+
+ obs.forEach((v) => {
+ console.log(v);
+})
+1
+2
+3
+4
+5
+ |
+
+ arr.forEach((v) => {
+ console.log(v);
+})
+1
+2
+3
+4
+5
+ |
+
+
+ map() |
+
+ obs.map((v) => -v)
+ ➞-1➞-2➞-3➞-5➞-7
+ |
+
+ arr.map((v) => -v)
+ [-1, -2, -3, -5, -7]
+ |
+
+
+ reduce() |
+
+ obs.scan((s,v)=> s+v, 0)
+ ➞1➞3➞6➞11➞18
+ |
+
+ arr.reduce((s,v) => s+v, 0)
+ 18
+ |
+
+
+
+
+
diff --git a/aio/content/guide/observables-in-angular.md b/aio/content/guide/observables-in-angular.md
new file mode 100644
index 0000000000..858e9c8dc5
--- /dev/null
+++ b/aio/content/guide/observables-in-angular.md
@@ -0,0 +1,51 @@
+# Observables in Angular
+
+Angular makes use of observables as an interface to handle a variety of common asynchronous operations. For example:
+
+* The `EventEmitter` class extends `Observable`.
+* The HTTP module uses observables to handle AJAX requests and responses.
+* The Router and Forms modules use observables to listen for and respond to user-input events.
+
+## Event emitter
+
+Angular provides an `EventEmitter` class that is used when publishing values from a component through the `@Output()` decorator. `EventEmitter` extends `Observable`, adding an `emit()` method so it can send arbitrary values. When you call `emit()`, it passes the emitted value to the `next()` method of any subscribed observer.
+
+A good example of usage can be found on the [EventEmitter](https://angular.io/api/core/EventEmitter) documentation. Here is the example component that listens for open and close events:
+
+`
+
+ In order to show how subscribing works, we need to create a new observable. There is a constructor that you use to create new instances, but for illustration, we can use some static methods on the `Observable` class that create simple observables of frequently used types:
+
+ * `Observable.of(...items)`—Returns an `Observable` instance that synchronously delivers the values provided as arguments.
+ * `Observable.from(iterable)`—Converts its argument to an `Observable` instance. This method is commonly used to convert an array to an observable.
+
+
+
+Here's an example of creating and subscribing to a simple observable, with an observer that logs the received message to the console:
+
+
+ Multicasting observables take a bit more setup, but they can be useful for certain applications. Later we will look at tools that simplify the process of multicasting, allowing you to take any observable and make it multicasting.
+
+
+## Error handling
+
+Because observables produce values asynchronously, try/catch will not effectively catch errors. Instead, you handle errors by specifying an `error` callback on the observer. Producing an error also causes the observable to clean up subscriptions and stop producing values. An observable can either produce values (calling the `next` callback), or it can complete, calling either the `complete` or `error` callback.
+
+
+ Note that, for Angular apps, we prefer combining operators with pipes, rather than chaining. Chaining is used in many RxJS examples.
+
+
+| Area | Operators |
+| :------------| :----------|
+| Creation | `from`, `fromPromise`,`fromEvent`, `of` |
+| Combination | `combineLatest`, `concat`, `merge`, `startWith` , `withLatestFrom`, `zip` |
+| Filtering | `debounceTime`, `distinctUntilChanged`, `filter`, `take`, `takeUntil` |
+| Transformation | `bufferTime`, `concatMap`, `map`, `mergeMap`, `scan`, `switchMap` |
+| Utility | `tap` |
+| Multicasting | `share` |
+
+## Error handling
+
+In addition to the `error()` handler that you provide on subscription, RxJS provides the `catchError` operator that lets you handle known errors in the observable recipe.
+
+For instance, suppose you have an observable that makes an API request and maps to the response from the server. If the server returns an error or the value doesn’t exist, an error is produced. If you catch this error and supply a default value, your stream continues to process values rather than erroring out.
+
+Here's an example of using the `catchError` operator to do this:
+
+
+
+ Do not retry **authentication** requests, since these should only be initiated by user action. We don't want to lock out user accounts with repeated login requests that the user has not initiated.
+
+
+
+## Naming conventions for observables
+
+Because Angular applications are mostly written in TypeScript, you will typically know when a variable is an observable. Although the Angular framework does not enforce a naming convention for observables, you will often see observables named with a trailing “$” sign.
+
+This can be useful when scanning through code and looking for observable values. Also, if you want a property to store the most recent value from an observable, it can be convenient to simply use the same name with or without the “$”.
+
+For example:
+
+