Added stream integration section

Author: brandonroberts

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

@@ -0,0 +1,14 @@
+<!-- #docregion -->
+<h2>ADD HERO</h2>
+
+<form [formGroup]="form" (ngSubmit)="save()" *ngIf="!success">
+  <p>
+    Name: <input type="text" formControlName="name" #heroName><br>
+    <span *ngIf="showErrors && form.hasError('required', ['name'])" class="error">Name is required</span>
+  </p>
+  <p>
+    <button type="submit" [disabled]="!form.valid">Save</button>
+  </p>
+</form>
+
+<span *ngIf="success">The hero has been added</span>

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

@@ -1,24 +1,37 @@
 // #docplaster
 // #docregion
+// #docregion rxjs-imports-1
 import 'rxjs/add/operator/takeUntil';
 import 'rxjs/add/observable/merge';
-import { Component, OnInit, OnDestroy } from '@angular/core';
+import 'rxjs/add/observable/fromEvent';
+// #enddocregion rxjs-imports-1
+// #docregion viewchild-imports
+import { Component, OnInit, OnDestroy, AfterViewInit, ViewChild, ElementRef } from '@angular/core';
+// #enddocregion viewchild-imports
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 
 import { Hero } from './hero';
 import { HeroService } from './hero.service';
+
+// #docregion rxjs-imports-2
 import { Observable } from 'rxjs/Observable';
-import { Subject } from 'rxjs/Observable';
+import { Subject } from 'rxjs/Subject';
+// #enddocregion rxjs-imports-2
 
+// #docregion viewchild-heroName
 @Component({
   moduleId: module.id,
   templateUrl: './add-hero.component.html',
   styles: [ '.error { color: red }' ]
 })
-export class AddHeroComponent implements OnInit, OnDestroy {
+export class AddHeroComponent implements OnInit, OnDestroy, AfterViewInit {
+  @ViewChild('heroName', { read: ElementRef }) heroName: ElementRef;
+// #enddocregion viewchild-heroName
+
   form: FormGroup;
   showErrors: boolean = false;
   success: boolean;
+  onDestroy$ = new Subject();
 
   constructor(
     private formBuilder: FormBuilder,
@@ -30,6 +43,27 @@ export class AddHeroComponent implements OnInit, OnDestroy {
       name: ['', [Validators.required]]
     });
   }
+// #docregion observable-event
+  ngAfterViewInit() {
+    const controlBlur$: Observable<Event> = Observable.fromEvent(this.heroName.nativeElement, 'blur');
+
+    Observable.merge(
+      controlBlur$
+    )
+    .takeUntil(this.onDestroy$)
+    .subscribe(() => this.checkForm());
+  }
+
+  checkForm() {
+    if (!this.form.valid) {
+      this.showErrors = true;
+    }
+  }
+// #enddocregion observable-event
+
+  ngOnDestroy() {
+    this.onDestroy$.complete();
+  }
 
   save(model: Hero) {
     this.heroService.addHero(model.name)

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

@@ -0,0 +1,75 @@
+// #docplaster
+// #docregion
+// #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';
+// #enddocregion viewchild-imports
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+
+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',
+  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;
+  success: boolean;
+  onDestroy$ = new Subject();
+
+  constructor(
+    private formBuilder: FormBuilder,
+    private heroService: HeroService
+  ) {}
+
+  ngOnInit() {
+    this.form = this.formBuilder.group({
+      name: ['', [Validators.required]]
+    });
+  }
+// #docregion value-changes
+  ngAfterViewInit() {
+    const controlBlur$: Observable<Event> = Observable.fromEvent(this.heroName.nativeElement, 'blur');
+
+    Observable.merge(
+      controlBlur$,
+      this.form.get('name').valueChanges
+    )
+    .takeUntil(this.onDestroy$)
+    .subscribe(() => this.checkForm());
+  }
+
+  checkForm() {
+    if (!this.form.valid) {
+      this.showErrors = true;
+    }
+  }
+// #enddocregion value-changes
+
+  ngOnDestroy() {
+    this.onDestroy$.complete();
+  }
+
+  save(model: Hero) {
+    this.heroService.addHero(model.name)
+      .subscribe(() => {
+        this.success = true;
+      });
+  }
+}

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

@@ -57,10 +57,10 @@ export class AddHeroComponent implements OnInit, OnDestroy, AfterViewInit {
     )
     .debounceTime(300)
     .takeUntil(this.onDestroy$)
-    .subscribe(() => this.checkErrors());
+    .subscribe(() => this.checkForm());
   }
 
-  checkErrors() {
+  checkForm() {
     if (!this.form.valid) {
       this.showErrors = true;
     }

public/docs/_examples/rxjs/ts/src/app/event-aggregator.service.ts

@@ -1,6 +1,7 @@
 // #docplaster
 // #docregion
 // #docregion imports
+import 'rxjs/add/operator/scan';
 import { Injectable }       from '@angular/core';
 import { BehaviorSubject }  from 'rxjs/BehaviorSubject';
 // #enddocregion imports
@@ -14,25 +15,11 @@ export interface AppEvent {
 
 @Injectable()
 export class EventAggregatorService {
-  _events: AppEvent[] = [];
-  events$: BehaviorSubject<AppEvent[]>;
-
-  constructor() {
-    this._events = [];
-    this.events$ = new BehaviorSubject(this._events);
-  }
+  _events$: BehaviorSubject<AppEvent[]> = new BehaviorSubject<AppEvent[]>([]);
+  events$ = this._events$
+   .scan((events, event) => events.concat(event), []);
 
   add(event: AppEvent) {
-    this._events.push(event);
-    this.notify();
-  }
-
-  clear() {
-    this._events = [];
-    this.notify();
-  }
-
-  notify() {
-    this.events$.next(this._events);
+    this._events$.next([event]);
   }
 }

public/docs/ts/latest/guide/rxjs.jade

@@ -314,7 +314,7 @@ h3#stream-integration Stream Integration
 +makeExcerpt('src/app/add-hero.component.1.ts (hero form component)', '')
 
 :marked
-  The hero form template is just getting started also.
+  And the hero form template.
 
 +makeExcerpt('src/app/add-hero.component.1.html (hero form template)', '')
 
@@ -326,10 +326,54 @@ h3#stream-integration Stream Integration
 +makeExcerpt('src/app/hero.service.4.ts (add hero)', '')
 
 :marked
-  If you look at the template closer, you'll see the `showErrors` boolean, which hides the error messages until you're ready to display them.
+  If you look at the template, you'll see the `showErrors` boolean, which hides the error messages until you're ready to display them.
   A good form waits until the user has interacted with the fields before displaying any errors, and you'll want to follow that same rule. So
-  how can you display errors once an interaction has happened? Reactive form controls provide an Observable stream of `valueChanges` whenever
-  the form input changes and we can subscribe to that. Let's add
+  how can you display errors once an interaction has happened? Interaction on the input can be as simple as entering the field
+  and leaving the field, also known as the blur event. Observables can be created from existing events. You'll use the `fromEvent`
+  operator to create an Observable from the existing `blur` event on the hero name input field.
+
+  In order to access the input field, you'll need to add a template reference to to the element. The `heroName` template reference will
+  give us access to the input field in the component class. The updated template is as follows:
+
++makeExcerpt('src/app/add-hero.component.2.html (heroName template reference)', '')
+
+:marked
+  Now that you can access the template reference, you'll need to import the `ViewChild` decorator, the `ElementRef` type
+  and the `AfterViewInit` lifecycle hook.
+
++makeExcerpt('src/app/add-hero.component.2.ts (ViewChild imports)', 'viewchild-imports')
+
+:marked
+  You'll use the `ViewChild` decorator to target the `heroName` template reference in the component assigned to
+  the `ElementRef` type.
+
++makeExcerpt('src/app/add-hero.component.2.ts (ViewChild ElementRef)', 'viewchild-heroName')
+
+:marked
+  As usual, you'll need to import a few instance and static operators to create the Observable event. As
+  previously mentioned, you'll use the `takeUntil` operator to clean up any Observable streams once the component
+  is destroyed. In order to create an Observable from an element event, the `fromEvent` observable creation operator
+  is needed. The `fromEvent` let's you create a stream from existing events emitted by elements. An additional operator
+  is the `merge` creation operator, which combines multiple streams together
+
++makeExcerpt('src/app/add-hero.component.2.ts (rxjs imports)', 'rxjs-imports-1')
+
+:marked
+  In order to use the `ViewChild`, you'll need to implement the `AfterViewInit` interface and the `ngAfterViewInit`
+  lifecycle hook. The `Observable.merge` let's you compose multiple observables and will emit when any of the source
+  Observables emit a value without waiting for each one. You'll subscribe to the Observable and check the validity of
+  the form in order to show errors. Now when the user triggers the `blur` event on the input the errors will be displayed.
+
++makeExcerpt('src/app/add-hero.component.2.ts (Observable fromEvent)', '')
+
+:marked
+  Since you can compose multiple streams using `Observable.merge`, you can easily add additional streams to trigger
+  the validation check. Since reactive forms provide an Observable of `valueChanges`, you can listen for value changes
+  from the `name` field and display errors once the user inputs some data also. You can easily access this through the reactive
+  forms getter. Update the merged observables to include the name valueChanges.
+
++makeExcerpt('src/app/add-hero.component.3.ts (Observable valueChanges)', 'value-changes')
+
 h3#further-reading Further Reading
 :marked
-  TODO
+  // TODO link some resources