docs(aio): add Observable and Rx docs (#21423)

PR Close #21423

aio/content/examples/rx-library/src/error-handling.ts

@@ -0,0 +1,26 @@
+
+import { Observable } from 'rxjs/Observable';
+import 'rxjs/add/observable/of';
+
+// #docregion
+
+import { ajax } from 'rxjs/observable/dom/ajax';
+import { map, catchError } from 'rxjs/operators';
+// Return "response" from the API. If an error happens,
+// return an empty array.
+const apiData = ajax('/api/data').pipe(
+  map(res => {
+    if (!res.response) {
+      throw new Error('Value expected!');
+    }
+    return res.response;
+  }),
+  catchError(err => Observable.of([]))
+);
+
+apiData.subscribe({
+  next(x) { console.log('data: ', x); },
+  error(err) { console.log('errors already caught... will not run'); }
+});
+
+// #enddocregion

aio/content/examples/rx-library/src/naming-convention.ts

@@ -0,0 +1,20 @@
+
+
+import { Component } from '@angular/core';
+import { Observable } from 'rxjs/Observable';
+
+@Component({
+  selector: 'app-stopwatch',
+  templateUrl: './stopwatch.component.html'
+})
+export class StopwatchComponent {
+
+  stopwatchValue: number;
+  stopwatchValue$: Observable<number>;
+
+  start() {
+    this.stopwatchValue$.subscribe(num =>
+      this.stopwatchValue = num
+    );
+  }
+}

aio/content/examples/rx-library/src/operators.1.ts

@@ -0,0 +1,25 @@
+import { Observable } from 'rxjs/Observable';
+import 'rxjs/add/observable/of';
+
+// #docregion
+
+import { pipe } from 'rxjs/util/pipe';
+import { filter, map } from 'rxjs/operators';
+
+const nums = Observable.of(1, 2, 3, 4, 5);
+
+// Create a function that accepts an Observable.
+const squareOddVals = pipe(
+  filter(n => n % 2),
+  map(n => n * n)
+);
+
+// Create an Observable that will run the filter and map functions
+const squareOdd = squareOddVals(nums);
+
+// Suscribe to run the combined functions
+squareOdd.subscribe(x => console.log(x));
+
+// #enddocregion
+
+

aio/content/examples/rx-library/src/operators.2.ts

@@ -0,0 +1,18 @@
+import { Observable } from 'rxjs/Observable';
+import 'rxjs/add/observable/of';
+
+// #docregion
+
+import { filter } from 'rxjs/operators/filter';
+import { map } from 'rxjs/operators/map';
+
+const squareOdd = Observable.of(1, 2, 3, 4, 5)
+  .pipe(
+    filter(n => n % 2),
+    map(n => n * n)
+  );
+
+// Subscribe to get values
+squareOdd.subscribe(x => console.log(x));
+
+// #enddocregion

aio/content/examples/rx-library/src/operators.ts

@@ -0,0 +1,21 @@
+
+import { Observable } from 'rxjs/Observable';
+import 'rxjs/add/observable/of';
+
+// #docregion
+
+import { map } from 'rxjs/operators';
+
+const nums = Observable.of(1, 2, 3);
+
+const squareValues = map((val: number) => val * val);
+const squaredNums = squareValues(nums);
+
+squaredNums.subscribe(x => console.log(x));
+
+// Logs
+// 1
+// 4
+// 9
+
+// #enddocregion

aio/content/examples/rx-library/src/retry-on-error.ts

@@ -0,0 +1,27 @@
+
+import { Observable } from 'rxjs/Observable';
+import 'rxjs/add/observable/of';
+
+
+// #docregion
+
+import { ajax } from 'rxjs/observable/dom/ajax';
+import { map, retry, catchError } from 'rxjs/operators';
+
+const apiData = ajax('/api/data').pipe(
+  retry(3), // Retry up to 3 times before failing
+  map(res => {
+    if (!res.response) {
+      throw new Error('Value expected!');
+    }
+    return res.response;
+  }),
+  catchError(err => Observable.of([]))
+);
+
+apiData.subscribe({
+  next(x) { console.log('data: ', x); },
+  error(err) { console.log('errors already caught... will not run'); }
+});
+
+// #enddocregion

aio/content/examples/rx-library/src/simple-creation.ts

@@ -0,0 +1,65 @@
+
+// #docregion promise
+
+import { fromPromise } from 'rxjs/observable/fromPromise';
+
+// Create an Observable out of a promise
+const data = fromPromise(fetch('/api/endpoint'));
+// Subscribe to begin listening for async result
+data.subscribe({
+ next(response) { console.log(response); },
+ error(err) { console.error('Error: ' + err); },
+ complete() { console.log('Completed'); }
+});
+
+// #enddocregion promise
+
+// #docregion interval
+
+import { interval } from 'rxjs/observable/interval';
+
+// Create an Observable that will publish a value on an interval
+const secondsCounter = interval(1000);
+// Subscribe to begin publishing values
+secondsCounter.subscribe(n =>
+  console.log(`It's been ${n} seconds since subscribing!`));
+
+// #enddocregion interval
+
+
+// #docregion event
+
+import { fromEvent } from 'rxjs/observable/fromEvent';
+
+const el = document.getElementById('my-element');
+
+// Create an Observable that will publish mouse movements
+const mouseMoves = fromEvent(el, 'mousemove');
+
+// Subscribe to start listening for mouse-move events
+const subscription = mouseMoves.subscribe((evt: MouseEvent) => {
+  // Log coords of mouse movements
+  console.log(`Coords: ${evt.clientX} X ${evt.clientY}`);
+
+  // When the mouse is over the upper-left of the screen,
+  // unsubscribe to stop listening for mouse movements
+  if (evt.clientX < 40 && evt.clientY < 40) {
+    subscription.unsubscribe();
+  }
+});
+
+// #enddocregion event
+
+
+// #docregion ajax
+
+import { ajax } from 'rxjs/observable/dom/ajax';
+
+// Create an Observable that will create an AJAX request
+const apiData = ajax('/api/data');
+// Subscribe to create the request
+apiData.subscribe(res => console.log(res.status, res.response));
+
+// #enddocregion ajax
+
+