Skip to content
This repository was archived by the owner on Dec 4, 2017. It is now read-only.

Commit 4bec612

Browse files
brandonrobertsbrandonroberts
committed
Updated section on subscription management
1 parent 84dadd0 commit 4bec612

File tree

3 files changed

+69
-43
lines changed

3 files changed

+69
-43
lines changed

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

Lines changed: 40 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,40 @@
1-
// // #docplaster
2-
// // #docregion
3-
// import { Component, OnInit } from '@angular/core';
4-
//
5-
// import { HeroService } from './hero.service';
6-
// import { Hero } from './hero';
7-
//
8-
// @Component({
9-
// template: `
10-
// <h2>HEROES</h2>
11-
// <ul class="items">
12-
// <li *ngFor="let hero of heroes">
13-
// <span class="badge">{{ hero.id }}</span> {{ hero.name }}
14-
// </li>
15-
// </ul>
16-
// `
17-
// })
18-
// export class HeroListComponent implements OnInit {
19-
// heroes: Hero[];
20-
//
21-
// constructor(
22-
// private service: HeroService
23-
// ) {}
24-
//
25-
// ngOnInit() {
26-
// this.service.getHeroes()
27-
// .subscribe(heroes => this.heroes = heroes);
28-
// }
29-
// }
30-
// // #enddocregion
1+
// #docplaster
2+
// #docregion
3+
// #docregion counter-unsubscribe
4+
import { Component, OnInit, OnDestroy } from '@angular/core';
5+
import { Observable } from 'rxjs/Observable';
6+
import { Observer } from 'rxjs/Observer';
7+
import { Subscription } from 'rxjs/Subscription';
8+
9+
@Component({
10+
selector: 'hero-counter',
11+
template: `
12+
<h2>HERO COUNTER</h2>
13+
<p>
14+
Heroes {{ count }}
15+
</p>
16+
`
17+
})
18+
export class HeroCounterComponent implements OnInit, OnDestroy {
19+
count: number = 0;
20+
counter$: Observable<number>;
21+
sub: Subscription;
22+
23+
ngOnInit() {
24+
this.counter$ = Observable.create((observer: Observer<number>) => {
25+
setInterval(() => {
26+
observer.next(this.count++);
27+
}, 1000);
28+
});
29+
30+
this.sub = this.counter$.subscribe();
31+
}
32+
// #enddocregion counter-unsubscribe
33+
// #docregion ngOnDestroy-unsubscribe
34+
ngOnDestroy() {
35+
this.sub.unsubscribe();
36+
}
37+
// #enddocregion ngOnDestroy-unsubscribe
38+
// #docregion counter-unsubscribe
39+
}
40+
// #enddocregion

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

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,17 @@
11
// #docplaster
22
// #docregion
3+
// #docregion takeUntil-operator
34
import 'rxjs/add/operator/takeUntil';
4-
import { Component, OnInit, OnDestroy } from '@angular/core';
5-
import { Subject } from 'rxjs/Subject';
5+
// #enddocregion takeUntil-operator
6+
import { Component, OnInit, OnDestroy } from '@angular/core';
67
import { Observable } from 'rxjs/Observable';
78
import { Observer } from 'rxjs/Observer';
89
import { Subscription } from 'rxjs/Subscription';
910

11+
// #docregion import-subject
12+
import { Subject } from 'rxjs/Subject';
13+
// #enddocregion import-subject
14+
1015
@Component({
1116
selector: 'hero-counter',
1217
template: `
@@ -20,7 +25,10 @@ export class HeroCounterComponent implements OnInit, OnDestroy {
2025
count: number = 0;
2126
counter$: Observable<number>;
2227
sub: Subscription;
28+
29+
// #docregion onDestroy-subject
2330
onDestroy$ = new Subject();
31+
// #enddocregion onDestroy-subject
2432

2533
ngOnInit() {
2634
this.counter$ = Observable.create((observer: Observer<number>) => {
@@ -33,9 +41,11 @@ export class HeroCounterComponent implements OnInit, OnDestroy {
3341
.takeUntil(this.onDestroy$)
3442
.subscribe();
3543
}
36-
44+
45+
// #docregion ngOnDestroy-complete
3746
ngOnDestroy() {
3847
this.onDestroy$.complete();
3948
}
49+
// #enddocregion ngOnDestroy-complete
4050
}
4151
// #enddocregion

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

Lines changed: 16 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -127,16 +127,18 @@ h3#managing-subscriptions Managing Subscriptions
127127
its no longer needed.
128128

129129
We'll create a component named `HeroCounterComponent` that will do a simple task of increasing a total of heroes. We'll simulate
130-
that this hero counter is running as long as the component is active an in view. Once the component is destroyed, we no longer
130+
that this hero counter is running as long as the component is active in the view. Once the component is destroyed, we no longer
131131
want to listen for any changes coming from the Observable counter.
132132

133-
// Example of hero counter
133+
+makeExcerpt('src/app/hero-counter.component.1.ts', 'counter-unsubscribe')
134134

135+
:marked
135136
Since you know Angular has lifecycle hooks, we can use the `ngOnDestroy` lifecycle hook to unsubscribe from this Observable counter
136137
and clean up its resources.
137138

138-
// Example of unsubscribe
139+
+makeExcerpt('src/app/hero-counter.component.1.ts', 'ngOnDestroy-unsubscribe')
139140

141+
:marked
140142
Disposing of a single subscription when your component is destroyed is very manageable, but as you use more Observables managing
141143
multiple subscriptions can get unwieldy. We can use a better approach to managing subscriptions. Observables have `operators`
142144
that can cancel other observable streams. We can end multiple observable streams with one observable using the `takeUntil` operator.
@@ -146,19 +148,23 @@ h3#managing-subscriptions Managing Subscriptions
146148
Let's update our hero counter example to use the `takeUntil` operator. In order to use the `takeUntil` operator, we must add it
147149
to the base Observable prototype. We'll import the operator which will add it to the observable.
148150

149-
// Example of import for takeUntil operator
151+
+makeExcerpt('src/app/hero-counter.component.ts', 'takeUntil-operator')
150152

153+
:marked
151154
Since we need an Observable that emits a value, we can use a `Subject`. We'll cover streams you can create on your own later in
152-
the chapter, as a `Subject` is a special type of Observable. We'll create a `destroy$` observable using the Subject.
155+
the chapter, as a `Subject` is a special type of Observable.
153156

154-
// Example of new Subject()
157+
+makeExcerpt('src/app/hero-counter.component.ts', 'import-subject')
155158

156-
Now we can add the `takeUntil` operator to our Observable and once the `destroy$` Observable produces a value,
157-
the counter Observable will complete and will no longer produce any values.
159+
:marked
160+
You'll need to create an `onDestroy$` observable using the Subject.
158161

159-
// example of destroy$ in ngOnDestroy
162+
+makeExcerpt('src/app/hero-counter.component.ts', 'onDestroy-subject')
160163

161-
This approach scales and you can use a single observable to trigger completion across multiple subscriptions.
164+
:marked
165+
Now we can add the `takeUntil` operator to our Observable and once the `onDestroy$` Observable completes,
166+
the counter Observable will complete and will no longer produce any values. This approach scales and you can use a single observable
167+
to trigger completion across multiple subscriptions.
162168

163169
+makeExcerpt('src/app/hero-counter.component.ts', '')
164170

0 commit comments

Comments
 (0)