Skip to content

Commit 60f98ba

Browse files
jamesdanielsjamesdaniels
authored
docs(): rxjs 6 (#1639)
1 parent 4df1939 commit 60f98ba

9 files changed

+74
-66
lines changed

‎README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ npm install firebase angularfire2 --save
3535
```ts
3636
import { Component } from '@angular/core';
3737
import { AngularFirestore } from 'angularfire2/firestore';
38-
import { Observable } from 'rxjs/Observable';
38+
import { Observable } from 'rxjs';
3939

4040
@Component({
4141
selector: 'app-root',

‎docs/firestore/collections.md

Lines changed: 27 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ The `AngularFirestoreCollection` service is a wrapper around the native Firestor
1010
```ts
1111
import { Component } from '@angular/core';
1212
import { AngularFirestore, AngularFirestoreCollection } from 'angularfire2/firestore';
13-
import { Observable } from 'rxjs/Observable';
13+
import { Observable } from 'rxjs';
1414

1515
export interface Item { name: string; }
1616

@@ -86,7 +86,7 @@ There are multiple ways of streaming collection data from Firestore.
8686
```ts
8787
import { Component } from '@angular/core';
8888
import { AngularFirestore, AngularFirestoreCollection } from 'angularfire2/firestore';
89-
import { Observable } from 'rxjs/Observable';
89+
import { Observable } from 'rxjs';
9090

9191
export interface Item { id: string; name: string; }
9292

@@ -135,8 +135,8 @@ export class AppComponent {
135135
```ts
136136
import { Component } from '@angular/core';
137137
import { AngularFirestore, AngularFirestoreCollection } from 'angularfire2/firestore';
138-
import { Observable } from 'rxjs/Observable';
139-
import 'rxjs/add/operator/map';
138+
import { Observable } from 'rxjs';
139+
import { map } from 'rxjs/operators';
140140

141141
export interface Shirt { name: string; price: number; }
142142
export interface ShirtId extends Shirt { id: string; }
@@ -159,13 +159,13 @@ export class AppComponent {
159159
// .snapshotChanges() returns a DocumentChangeAction[], which contains
160160
// a lot of information about "what happened" with each change. If you want to
161161
// get the data and the id use the map operator.
162-
this.shirts = this.shirtCollection.snapshotChanges().map(actions => {
163-
return actions.map(a => {
162+
this.shirts = this.shirtCollection.snapshotChanges().pipe(
163+
map(actions => actions.map(a => {
164164
const data = a.payload.doc.data() as Shirt;
165165
const id = a.payload.doc.id;
166166
return { id, ...data };
167-
});
168-
});
167+
}))
168+
);
169169
}
170170
}
171171
```
@@ -181,7 +181,8 @@ export class AppComponent {
181181
```ts
182182
import { Component } from '@angular/core';
183183
import { AngularFirestore, AngularFirestoreCollection } from 'angularfire2/firestore';
184-
import { Observable } from 'rxjs/Observable';
184+
import { Observable } from 'rxjs';
185+
import { map } from 'rxjs/operators';
185186

186187
export interface AccountDeposit { description: string; amount: number; }
187188
export interface AccountDepoistId extends AccountDeposit { id: string; }
@@ -201,14 +202,13 @@ export class AppComponent {
201202
deposits: Observable<AccountDepositId[]>;
202203
constructor(private readonly afs: AngularFirestore) {
203204
this.depositCollection = afs.collection<AccountDeposit>('deposits');
204-
this.deposits = this.depositCollection.stateChanges(['added'])
205-
.map(actions => {
206-
return actions.map(a => {
207-
const data = a.payload.doc.data() as AccountDeposit;
208-
const id = a.payload.doc.id;
209-
return { id, ...data };
210-
})
211-
});
205+
this.deposits = this.depositCollection.stateChanges(['added']).pipe(
206+
map(actions => actions.map(a => {
207+
const data = a.payload.doc.data() as AccountDeposit;
208+
const id = a.payload.doc.id;
209+
return { id, ...data };
210+
}))
211+
);
212212
}
213213
}
214214
```
@@ -224,7 +224,8 @@ export class AppComponent {
224224
```ts
225225
import { Component } from '@angular/core';
226226
import { AngularFirestore, AngularFirestoreCollection } from 'angularfire2/firestore';
227-
import { Observable } from 'rxjs/Observable';
227+
import { Observable } from 'rxjs';
228+
import { map } from 'rxjs/operators';
228229

229230
export interface AccountLogItem { description: string; amount: number; }
230231
export interface AccountLogItemId extends AccountLogItem { id: string; }
@@ -244,14 +245,13 @@ export class AppComponent {
244245
accountLogs: Observable<AccountLogItemId[]>;
245246
constructor(private readonly afs: AngularFirestore) {
246247
this.accountLogCollection = afs.collection<AccountLogItem>('accountLog');
247-
this.accountLogs = this.accountLogCollection.auditTrail()
248-
.map(actions => {
249-
return actions.map(a => {
250-
const data = a.payload.doc.data() as AccountLogItem;
251-
const id = a.payload.doc.id;
252-
return { id, ...data };
253-
})
254-
});
248+
this.accountLogs = this.accountLogCollection.auditTrail().pipe(
249+
map(actions => actions.map(a => {
250+
const data = a.payload.doc.data() as AccountLogItem;
251+
const id = a.payload.doc.id;
252+
return { id, ...data };
253+
}))
254+
);
255255
}
256256
}
257257
```
@@ -272,7 +272,7 @@ There are three `DocumentChangeType`s in Firestore: `added`, `removed`, and `mod
272272
```ts
273273
import { Component } from '@angular/core';
274274
import { AngularFirestore, AngularFirestoreCollection } from 'angularfire2/firestore';
275-
import { Observable } from 'rxjs/Observable';
275+
import { Observable } from 'rxjs';
276276

277277
@Component({
278278
selector: 'app-root',

‎docs/firestore/documents.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ The `AngularFirestoreDocument` service is a wrapper around the native Firestore
1010
```ts
1111
import { Component } from '@angular/core';
1212
import { AngularFirestore, AngularFirestoreDocument } from 'angularfire2/firestore';
13-
import { Observable } from 'rxjs/Observable';
13+
import { Observable } from 'rxjs';
1414

1515
@Component({
1616
selector: 'app-root',

‎docs/firestore/querying-collections.md

Lines changed: 16 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -59,8 +59,10 @@ When we call [`switchMap` on the Subject](https://www.learnrxjs.io/operators/tra
5959

6060
```ts
6161
const size$ = new Subject<string>();
62-
const queryObservable = size$.switchMap(size =>
63-
afs.collection('items', ref => ref.where('size', '==', size)).valueChanges();
62+
const queryObservable = size$.pipe(
63+
switchMap(size =>
64+
afs.collection('items', ref => ref.where('size', '==', size)).valueChanges()
65+
)
6466
);
6567

6668
// subscribe to changes
@@ -82,10 +84,8 @@ size$.next('small');
8284
```ts
8385
import { Component } from '@angular/core';
8486
import { AngularFirestore } from 'angularfire2/firestore';
85-
import { Observable } from 'rxjs/Observable';
86-
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
87-
import 'rxjs/add/operator/switchMap';
88-
import 'rxjs/add/observable/combineLatest';
87+
import { Observable, BehaviorSubject, combineLatest } from 'rxjs';
88+
import { switchMap } from 'rxjs/operators';
8989

9090
export interface Item {
9191
text: string;
@@ -133,16 +133,18 @@ export class AppComponent {
133133
constructor(afs: AngularFirestore) {
134134
this.sizeFilter$ = new BehaviorSubject(null);
135135
this.colorFilter$ = new BehaviorSubject(null);
136-
this.items$ = Observable.combineLatest(
136+
this.items$ = combineLatest(
137137
this.sizeFilter$,
138138
this.colorFilter$
139-
).switchMap(([size, color]) =>
140-
afs.collection('items', ref => {
141-
let query : firebase.firestore.CollectionReference | firebase.firestore.Query = ref;
142-
if (size) { query = query.where('size', '==', size) };
143-
if (color) { query = query.where('color', '==', color) };
144-
return query;
145-
}).valueChanges()
139+
).pipe(
140+
switchMap(([size, color]) =>
141+
afs.collection('items', ref => {
142+
let query : firebase.firestore.CollectionReference | firebase.firestore.Query = ref;
143+
if (size) { query = query.where('size', '==', size) };
144+
if (color) { query = query.where('color', '==', color) };
145+
return query;
146+
}).valueChanges()
147+
)
146148
);
147149
}
148150
filterBySize(size: string|null) {

‎docs/install-and-setup.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -155,7 +155,7 @@ In `/src/app/app.component.ts`:
155155
```ts
156156
import { Component } from '@angular/core';
157157
import { AngularFirestore } from 'angularfire2/firestore';
158-
import { Observable } from 'rxjs/Observable';
158+
import { Observable } from 'rxjs';
159159

160160
@Component({
161161
selector: 'app-root',

‎docs/rtdb/lists.md

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ Update `/src/app/app.component.ts` to import `AngularFireList` from angularfire2
5353
```ts
5454
import { Component } from '@angular/core';
5555
import { AngularFireDatabase } from 'angularfire2/database';
56-
import { Observable } from 'rxjs/Observable';
56+
import { Observable } from 'rxjs';
5757

5858
@Component({
5959
selector: 'app-root',
@@ -203,8 +203,8 @@ itemsRef.remove();
203203
```ts
204204
import { Component } from '@angular/core';
205205
import { AngularFireDatabase, AngularFireList } from 'angularfire2/database';
206-
import { Observable } from 'rxjs/Observable';
207-
import 'rxjs/add/operator/map';
206+
import { Observable } from 'rxjs';
207+
import { map } from 'rxjs/operators';
208208

209209
@Component({
210210
selector: 'app-root',
@@ -227,9 +227,11 @@ export class AppComponent {
227227
constructor(db: AngularFireDatabase) {
228228
this.itemsRef = db.list('messages');
229229
// Use snapshotChanges().map() to store the key
230-
this.items = this.itemsRef.snapshotChanges().map(changes => {
231-
return changes.map(c => ({ key: c.payload.key, ...c.payload.val() }));
232-
});
230+
this.items = this.itemsRef.snapshotChanges().pipe(
231+
map(changes =>
232+
changes.map(c => ({ key: c.payload.key, ...c.payload.val() }))
233+
)
234+
);
233235
}
234236
addItem(newName: string) {
235237
this.itemsRef.push({ text: newName });

‎docs/rtdb/objects.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ If you've followed the earlier step "Installation and Setup" your `/src/app/app
1717
```ts
1818
import { Component } from '@angular/core';
1919
import { AngularFireDatabase } from 'angularfire2/database';
20-
import { Observable } from 'rxjs/Observable';
20+
import { Observable } from 'rxjs';
2121

2222
@Component({
2323
selector: 'app-root',
@@ -49,7 +49,7 @@ Then in your template, you can use the `async` pipe to unwrap the binding.
4949
```ts
5050
import { Component } from '@angular/core';
5151
import { AngularFireDatabase } from 'angularfire2/database';
52-
import { Observable } from 'rxjs/Observable';
52+
import { Observable } from 'rxjs';
5353

5454
@Component({
5555
selector: 'app-root',
@@ -125,7 +125,7 @@ itemRef.remove();
125125
```ts
126126
import { Component } from '@angular/core';
127127
import { AngularFireDatabase, AngularFireObject } from 'angularfire2/database';
128-
import { Observable } from 'rxjs/Observable';
128+
import { Observable } from 'rxjs';
129129

130130
@Component({
131131
selector: 'app-root',

‎docs/rtdb/querying-lists.md

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -55,8 +55,10 @@ When we call [`switchMap` on the Subject](https://www.learnrxjs.io/operators/tra
5555

5656
```ts
5757
const size$ = new Subject<string>();
58-
const queryObservable = size$.switchMap(size =>
59-
db.list('/items', ref => ref.orderByChild('size').equalTo(size)).valueChanges()
58+
const queryObservable = size$.pipe(
59+
switchMap(size =>
60+
db.list('/items', ref => ref.orderByChild('size').equalTo(size)).valueChanges()
61+
)
6062
);
6163

6264
// subscribe to changes
@@ -78,10 +80,8 @@ size$.next('small');
7880
```ts
7981
import { Component } from '@angular/core';
8082
import { AngularFireDatabase, AngularFireAction } from 'angularfire2/database';
81-
import { Observable } from 'rxjs/Observable';
82-
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
83-
import { Subscription } from 'rxjs/Subscription';
84-
import 'rxjs/add/operator/switchMap';
83+
import { Observable, Subscription, BehaviorSubject } from 'rxjs';
84+
import { switchMap } 'rxjs/operators';
8585

8686
@Component({
8787
selector: 'app-root',
@@ -115,10 +115,12 @@ export class AppComponent {
115115
116116
constructor(db: AngularFireDatabase) {
117117
this.size$ = new BehaviorSubject(null);
118-
this.items$ = this.size$.switchMap(size =>
119-
db.list('/items', ref =>
120-
size ? ref.orderByChild('size').equalTo(size) : ref
121-
).snapshotChanges()
118+
this.items$ = this.size$.pipe(
119+
switchMap(size =>
120+
db.list('/items', ref =>
121+
size ? ref.orderByChild('size').equalTo(size) : ref
122+
).snapshotChanges()
123+
)
122124
);
123125
}
124126
filterBy(size: string|null) {

‎docs/version-5-upgrade.md

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -43,9 +43,11 @@ constructor(afDb: AngularFireDatabase) {
4343
### 5.0
4444
```ts
4545
constructor(afDb: AngularFireDatabase) {
46-
afDb.list('items').snapshotChanges().map(actions => {
47-
return actions.map(action => ({ key: action.key, ...action.payload.val() }));
48-
}).subscribe(items => {
46+
afDb.list('items').snapshotChanges().pipe(
47+
map(actions =>
48+
actions.map(a => ({ key: a.key, ...a.payload.val() }))
49+
)
50+
).subscribe(items => {
4951
return items.map(item => item.key);
5052
});
5153
}

0 commit comments

Comments
 (0)