Added more prose for managing subscriptions and async pipe

Author: brandonroberts

public/docs/_examples/rxjs/ts/app/app.module.ts

@@ -11,7 +11,7 @@ import { LoadingComponent }           from './loading.component';
 import { HeroSearchComponent }        from './hero-search.component';
 import { HeroDetailComponent }        from './hero-detail.component';
 import { HeroListComponent }          from './hero-list.component';
-
+import { HeroCounterComponent }       from './hero-counter.component';
 import { LoadingService }             from './loading.service';
 import { HeroService }                from './hero.service';
 
@@ -34,7 +34,8 @@ import { ApiErrorHandlerService } from './api-error-handler.service';
     LoadingComponent,
     HeroSearchComponent,
     HeroDetailComponent,
-    HeroListComponent
+    HeroListComponent,
+    HeroCounterComponent
   ],
   providers: [
     HeroService,

public/docs/_examples/rxjs/ts/app/hero-counter.component.1.ts

@@ -0,0 +1,30 @@
+// // #docplaster
+// // #docregion
+// import { Component, OnInit }   from '@angular/core';
+//
+// import { HeroService }   from './hero.service';
+// import { Hero }          from './hero';
+//
+// @Component({
+//   template: `
+//     <h2>HEROES</h2>
+//     <ul class="items">
+//       <li *ngFor="let hero of heroes">
+//         <span class="badge">{{ hero.id }}</span> {{ hero.name }}
+//       </li>
+//     </ul>
+//   `
+// })
+// export class HeroListComponent implements OnInit {
+//   heroes: Hero[];
+//
+//   constructor(
+//     private service: HeroService
+//   ) {}
+//
+//   ngOnInit() {
+//     this.service.getHeroes()
+//       .subscribe(heroes => this.heroes = heroes);
+//   }
+// }
+// // #enddocregion

public/docs/_examples/rxjs/ts/app/hero-counter.component.ts

@@ -0,0 +1,43 @@
+// #docplaster
+// #docregion
+import { Component, OnInit }   from '@angular/core';
+import { Subject } from 'rxjs/Subject';
+import { Observable } from 'rxjs/Observable';
+import { Observer } from 'rxjs/Observer';
+import { Subscription } from 'rxjs/Subscription';
+
+import { HeroService }   from './hero.service';
+import { Hero }          from './hero';
+
+@Component({
+  selector: 'hero-counter',
+  template: `
+    <h2>HERO COUNTER</h2>
+    <p>
+      Heroes {{ count }}
+    </p>
+  `
+})
+export class HeroCounterComponent implements OnInit {
+  count: number = 0;
+  counter$: Observable<number>;
+  sub: Subscription;
+  destroy$ = new Subject();
+
+  ngOnInit() {
+    this.counter$ = Observable.create((observer: Observer<number>) => {
+      const interval = setInterval(() => {
+        observer.next(this.count++);
+      }, 1000);
+    });
+
+    this.counter$
+      .takeUntil(this.destroy$)
+      .subscribe();
+  }
+
+  ngOnDestroy() {
+    this.destroy$.next();
+  }
+}
+// #enddocregion