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

PR Close #21423

aio/content/examples/practical-observable-usage/src/backoff.ts

@@ -0,0 +1,26 @@
+
+import { ajax } from 'rxjs/observable/dom/ajax';
+import { range } from 'rxjs/observable/range';
+import { timer } from 'rxjs/observable/timer';
+import { pipe } from 'rxjs/util/pipe';
+import { retryWhen, zip, map, mergeMap } from 'rxjs/operators';
+
+function backoff(maxTries, ms) {
+ return pipe(
+   retryWhen(attempts => range(1, maxTries)
+     .pipe(
+       zip(attempts, (i) => i),
+       map(i => i * i),
+       mergeMap(i =>  timer(i * ms))
+     )
+   )
+ );
+}
+
+ajax('/api/endpoint')
+  .pipe(backoff(3, 250))
+  .subscribe(data => handleData(data));
+
+function handleData(data) {
+  // ...
+}

aio/content/examples/practical-observable-usage/src/typeahead.ts

@@ -0,0 +1,18 @@
+
+import { fromEvent } from 'rxjs/observable/fromEvent';
+import { ajax } from 'rxjs/observable/dom/ajax';
+import { map, filter, debounceTime, distinctUntilChanged, switchMap } from 'rxjs/operators';
+
+const searchBox = document.getElementById('search-box');
+
+const typeahead = fromEvent(searchBox, 'input').pipe(
+  map((e: KeyboardEvent) => e.target.value),
+  filter(text => text.length > 2),
+  debounceTime(10),
+  distinctUntilChanged(),
+  switchMap(() => ajax('/api/endpoint'))
+);
+
+typeahead.subscribe(data => {
+ // Handle the data from the API
+});