Added examples for observable and operator basics

Author: brandonroberts

public/docs/_examples/rxjs/ts/src/app/add-hero.component.3.ts

@@ -1,27 +1,32 @@
 // #docplaster
 // #docregion
-import 'rxjs/add/observable/of';
-import 'rxjs/add/observable/fromEvent';
-import 'rxjs/add/observable/merge';
-import 'rxjs/add/operator/debounceTime';
-import 'rxjs/add/operator/do';
-import 'rxjs/add/operator/switchMap';
+// #docregion rxjs-imports-1
 import 'rxjs/add/operator/takeUntil';
+import 'rxjs/add/observable/merge';
+import 'rxjs/add/observable/fromEvent';
+// #enddocregion rxjs-imports-1
+// #docregion viewchild-imports
 import { Component, OnInit, OnDestroy, AfterViewInit, ViewChild, ElementRef } from '@angular/core';
-import { FormBuilder, FormGroup, FormControl, Validators } from '@angular/forms';
-import { Observable } from 'rxjs/Observable';
-import { Subject } from 'rxjs/Subject';
+// #enddocregion viewchild-imports
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 
-import { EventAggregatorService } from './event-aggregator.service';
+import { Hero } from './hero';
 import { HeroService } from './hero.service';
 
+// #docregion rxjs-imports-2
+import { Observable } from 'rxjs/Observable';
+import { Subject } from 'rxjs/Subject';
+// #enddocregion rxjs-imports-2
+
+// #docregion viewchild-heroName
 @Component({
   moduleId: module.id,
-  templateUrl: 'add-hero.component.html',
+  templateUrl: './add-hero.component.html',
   styles: [ '.error { color: red }' ]
 })
 export class AddHeroComponent implements OnInit, OnDestroy, AfterViewInit {
   @ViewChild('heroName', { read: ElementRef }) heroName: ElementRef;
+// #enddocregion viewchild-heroName
 
   form: FormGroup;
   showErrors: boolean = false;
@@ -30,32 +35,22 @@ export class AddHeroComponent implements OnInit, OnDestroy, AfterViewInit {
 
   constructor(
     private formBuilder: FormBuilder,
-    private heroService: HeroService,
-    private eventService: EventAggregatorService
+    private heroService: HeroService
   ) {}
 
   ngOnInit() {
     this.form = this.formBuilder.group({
-      name: ['', [Validators.required], [(control: FormControl) => {
-        return this.checkHeroName(control.value);
-      }]]
+      name: ['', [Validators.required]]
     });
   }
-
-  checkHeroName(name: string) {
-    return Observable.of(name)
-      .switchMap(heroName => this.heroService.isNameAvailable(heroName))
-      .map(available => available ? null : { taken: true });
-  }
-
+// #docregion value-changes
   ngAfterViewInit() {
-    const controlBlur$ = Observable.fromEvent(this.heroName.nativeElement, 'blur');
+    const controlBlur$: Observable<Event> = Observable.fromEvent(this.heroName.nativeElement, 'blur');
 
     Observable.merge(
-      this.form.valueChanges,
-      controlBlur$
+      controlBlur$,
+      this.form.get('name').valueChanges
     )
-    .debounceTime(300)
     .takeUntil(this.onDestroy$)
     .subscribe(() => this.checkForm());
   }
@@ -65,19 +60,16 @@ export class AddHeroComponent implements OnInit, OnDestroy, AfterViewInit {
       this.showErrors = true;
     }
   }
+// #enddocregion value-changes
+
+  ngOnDestroy() {
+    this.onDestroy$.complete();
+  }
 
-  save(model: any) {
+  save(model: Hero) {
     this.heroService.addHero(model.name)
       .subscribe(() => {
         this.success = true;
-        this.eventService.add({
-          type: 'hero',
-          message: 'Hero Added'
-        });
       });
   }
-
-  ngOnDestroy() {
-    this.onDestroy$.complete();
-  }
 }

public/docs/_examples/rxjs/ts/src/app/add-hero.component.ts

@@ -0,0 +1,39 @@
+// #docregion
+/*
+// #docregion basic-1
+import { Observable } from 'rxjs/Observable';
+import { Observer } from 'rxjs/Observer';
+
+const heroObservable = Observable.create((observer: Observer) => {
+  // notify observer of values
+  observer.next('Mr. Nice');
+
+  // notify observer of an error
+  observer.error(new Error('I failed the mission'));
+
+  // notify observer of completion
+  observer.complete();
+});
+// #enddocregion basic-1
+// #docregion basic-2
+const heroObservable = Observable.create((observer: Observer) => {
+  // notify observer of values
+  observer.next('Mr. Nice');
+  observer.next('Narco');
+});
+// #enddocregion basic-2
+// #docregion basic-3
+import { Subscription } from 'rxjs/Subscription';
+
+const observer: Observer = {
+  next: (hero) => { console.log(`Hero: ${hero}`); },
+  error: (error) => { console.log(`Something went wrong: ${error}`); },
+  complete: () => { console.log('All done here'); }
+};
+
+const subscription = heroObservable.subscribe(observer);
+// #enddocregion basic-3
+// #docregion basic-4
+subscription.unsubscribe();
+// #enddocregion basic-4
+*/

public/docs/_examples/rxjs/ts/src/app/observable-basics.ts

@@ -0,0 +1,37 @@
+// #docregion
+/*
+// #docregion basic-1
+import 'rxjs/add/operator/map';
+import { Observable } from 'rxjs/Observable';
+import { Observer } from 'rxjs/Observer';
+import { Subscription }  from 'rxjs/Subscription';
+
+const heroObservable = Observable.create((observer: Observer) => {
+  // notify observer of values
+  observer.next('Mr. Nice');
+  observer.next('Narco');
+  observer.complete();
+});
+
+// map each hero value to new value
+const subscription = heroObservable
+  .map(hero => `(( ${hero} ))` )
+  .subscribe(
+    // next
+    (heroName) => { console.log(`Mapped hero: ${heroName}`); },
+    // error
+    () => {},
+    // complete
+    () => { console.log('Finished'); }
+  );
+// #enddocregion basic-1
+// #docregion basic-2
+import 'rxjs/add/observable/interval';
+import 'rxjs/add/operator/interval';
+import { Observable } from 'rxjs/Observable';
+import { Subscription }  from 'rxjs/Subscription';
+
+const intervalObservable = Observable.interval(1000);
+
+const subscription: Subscription = intervalObservable.take(5).subscribe();
+// #enddocregion basic-2