docs(): rxjs 6 (angular#1639)

Author: jamesdaniels

README.md

@@ -35,7 +35,7 @@ npm install firebase angularfire2 --save
 ```ts
 import { Component } from '@angular/core';
 import { AngularFirestore } from 'angularfire2/firestore';
-import { Observable } from 'rxjs/Observable';
+import { Observable } from 'rxjs';
 
 @Component({
   selector: 'app-root',

docs/firestore/collections.md

@@ -10,7 +10,7 @@ The `AngularFirestoreCollection` service is a wrapper around the native Firestor
 ```ts
 import { Component } from '@angular/core';
 import { AngularFirestore, AngularFirestoreCollection } from 'angularfire2/firestore';
-import { Observable } from 'rxjs/Observable';
+import { Observable } from 'rxjs';
 
 export interface Item { name: string; }
 
@@ -86,7 +86,7 @@ There are multiple ways of streaming collection data from Firestore.
 ```ts
 import { Component } from '@angular/core';
 import { AngularFirestore, AngularFirestoreCollection } from 'angularfire2/firestore';
-import { Observable } from 'rxjs/Observable';
+import { Observable } from 'rxjs';
 
 export interface Item { id: string; name: string; }
 
@@ -135,8 +135,8 @@ export class AppComponent {
 ```ts
 import { Component } from '@angular/core';
 import { AngularFirestore, AngularFirestoreCollection } from 'angularfire2/firestore';
-import { Observable } from 'rxjs/Observable';
-import 'rxjs/add/operator/map';
+import { Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
 
 export interface Shirt { name: string; price: number; }
 export interface ShirtId extends Shirt { id: string; }
@@ -159,13 +159,13 @@ export class AppComponent {
     // .snapshotChanges() returns a DocumentChangeAction[], which contains
     // a lot of information about "what happened" with each change. If you want to
     // get the data and the id use the map operator.
-    this.shirts = this.shirtCollection.snapshotChanges().map(actions => {
-      return actions.map(a => {
+    this.shirts = this.shirtCollection.snapshotChanges().pipe(
+      map(actions => actions.map(a => {
         const data = a.payload.doc.data() as Shirt;
         const id = a.payload.doc.id;
         return { id, ...data };
-      });
-    });
+      }))
+    );
   }
 }
 ```
@@ -181,7 +181,8 @@ export class AppComponent {
 ```ts
 import { Component } from '@angular/core';
 import { AngularFirestore, AngularFirestoreCollection } from 'angularfire2/firestore';
-import { Observable } from 'rxjs/Observable';
+import { Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
 
 export interface AccountDeposit { description: string; amount: number; }
 export interface AccountDepoistId extends AccountDeposit { id: string; }
@@ -201,14 +202,13 @@ export class AppComponent {
   deposits: Observable<AccountDepositId[]>;
   constructor(private readonly afs: AngularFirestore) {
     this.depositCollection = afs.collection<AccountDeposit>('deposits');
-    this.deposits = this.depositCollection.stateChanges(['added'])
-      .map(actions => {
-        return actions.map(a => {
-          const data = a.payload.doc.data() as AccountDeposit;
-          const id = a.payload.doc.id;
-          return { id, ...data };
-        })
-      });
+    this.deposits = this.depositCollection.stateChanges(['added']).pipe(
+      map(actions => actions.map(a => {
+        const data = a.payload.doc.data() as AccountDeposit;
+        const id = a.payload.doc.id;
+        return { id, ...data };
+      }))
+    );
   }
 }
 ```
@@ -224,7 +224,8 @@ export class AppComponent {
 ```ts
 import { Component } from '@angular/core';
 import { AngularFirestore, AngularFirestoreCollection } from 'angularfire2/firestore';
-import { Observable } from 'rxjs/Observable';
+import { Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
 
 export interface AccountLogItem { description: string; amount: number; }
 export interface AccountLogItemId extends AccountLogItem { id: string; }
@@ -244,14 +245,13 @@ export class AppComponent {
   accountLogs: Observable<AccountLogItemId[]>;
   constructor(private readonly afs: AngularFirestore) {
     this.accountLogCollection = afs.collection<AccountLogItem>('accountLog');
-    this.accountLogs = this.accountLogCollection.auditTrail()
-      .map(actions => {
-        return actions.map(a => {
-          const data = a.payload.doc.data() as AccountLogItem;
-          const id = a.payload.doc.id;
-          return { id, ...data };
-        })
-      });
+    this.accountLogs = this.accountLogCollection.auditTrail().pipe(
+      map(actions => actions.map(a => {
+        const data = a.payload.doc.data() as AccountLogItem;
+        const id = a.payload.doc.id;
+        return { id, ...data };
+      }))
+    );
   }
 }
 ```
@@ -272,7 +272,7 @@ There are three `DocumentChangeType`s in Firestore: `added`, `removed`, and `mod
 ```ts
 import { Component } from '@angular/core';
 import { AngularFirestore, AngularFirestoreCollection } from 'angularfire2/firestore';
-import { Observable } from 'rxjs/Observable';
+import { Observable } from 'rxjs';
 
 @Component({
   selector: 'app-root',

docs/firestore/documents.md

@@ -10,7 +10,7 @@ The `AngularFirestoreDocument` service is a wrapper around the native Firestore
 ```ts
 import { Component } from '@angular/core';
 import { AngularFirestore, AngularFirestoreDocument } from 'angularfire2/firestore';
-import { Observable } from 'rxjs/Observable';
+import { Observable } from 'rxjs';
 
 @Component({
   selector: 'app-root',

docs/firestore/querying-collections.md

@@ -59,8 +59,10 @@ When we call [`switchMap` on the Subject](https://www.learnrxjs.io/operators/tra
 
 ```ts
 const size$ = new Subject<string>();
-const queryObservable = size$.switchMap(size =>
-  afs.collection('items', ref => ref.where('size', '==', size)).valueChanges();
+const queryObservable = size$.pipe(
+  switchMap(size => 
+    afs.collection('items', ref => ref.where('size', '==', size)).valueChanges()
+  )
 );
 
 // subscribe to changes
@@ -82,10 +84,8 @@ size$.next('small');
 ```ts
 import { Component } from '@angular/core';
 import { AngularFirestore } from 'angularfire2/firestore';
-import { Observable } from 'rxjs/Observable';
-import { BehaviorSubject } from 'rxjs/BehaviorSubject';
-import 'rxjs/add/operator/switchMap';
-import 'rxjs/add/observable/combineLatest';
+import { Observable, BehaviorSubject, combineLatest } from 'rxjs';
+import { switchMap } from 'rxjs/operators';
 
 export interface Item {
   text: string;
@@ -133,16 +133,18 @@ export class AppComponent {
   constructor(afs: AngularFirestore) {
     this.sizeFilter$ = new BehaviorSubject(null);
     this.colorFilter$ = new BehaviorSubject(null);
-    this.items$ = Observable.combineLatest(
+    this.items$ = combineLatest(
       this.sizeFilter$,
       this.colorFilter$
-    ).switchMap(([size, color]) => 
-      afs.collection('items', ref => {
-        let query : firebase.firestore.CollectionReference | firebase.firestore.Query = ref;
-        if (size) { query = query.where('size', '==', size) };
-        if (color) { query = query.where('color', '==', color) };
-        return query;
-      }).valueChanges()
+    ).pipe(
+      switchMap(([size, color]) => 
+        afs.collection('items', ref => {
+          let query : firebase.firestore.CollectionReference | firebase.firestore.Query = ref;
+          if (size) { query = query.where('size', '==', size) };
+          if (color) { query = query.where('color', '==', color) };
+          return query;
+        }).valueChanges()
+      )
     );
   }
   filterBySize(size: string|null) {

docs/install-and-setup.md

@@ -155,7 +155,7 @@ In `/src/app/app.component.ts`:
 ```ts
 import { Component } from '@angular/core';
 import { AngularFirestore } from 'angularfire2/firestore';
-import { Observable } from 'rxjs/Observable';
+import { Observable } from 'rxjs';
 
 @Component({
   selector: 'app-root',

docs/rtdb/lists.md

@@ -53,7 +53,7 @@ Update `/src/app/app.component.ts` to import `AngularFireList` from angularfire2
 ```ts
 import { Component } from '@angular/core';
 import { AngularFireDatabase } from 'angularfire2/database';
-import { Observable } from 'rxjs/Observable';
+import { Observable } from 'rxjs';
 
 @Component({
   selector: 'app-root',
@@ -203,8 +203,8 @@ itemsRef.remove();
 ```ts
 import { Component } from '@angular/core';
 import { AngularFireDatabase, AngularFireList } from 'angularfire2/database';
-import { Observable } from 'rxjs/Observable';
-import 'rxjs/add/operator/map';
+import { Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
 
 @Component({
   selector: 'app-root',
@@ -227,9 +227,11 @@ export class AppComponent {
   constructor(db: AngularFireDatabase) {
     this.itemsRef = db.list('messages');
     // Use snapshotChanges().map() to store the key
-    this.items = this.itemsRef.snapshotChanges().map(changes => {
-      return changes.map(c => ({ key: c.payload.key, ...c.payload.val() }));
-    });
+    this.items = this.itemsRef.snapshotChanges().pipe(
+      map(changes => 
+        changes.map(c => ({ key: c.payload.key, ...c.payload.val() }))
+      )
+    );
   }
   addItem(newName: string) {
     this.itemsRef.push({ text: newName });

docs/rtdb/objects.md

@@ -17,7 +17,7 @@ If you've followed the earlier step "Installation and Setup"  your `/src/app/app
 ```ts
 import { Component } from '@angular/core';
 import { AngularFireDatabase } from 'angularfire2/database';
-import { Observable } from 'rxjs/Observable';
+import { Observable } from 'rxjs';
 
 @Component({
   selector: 'app-root',
@@ -49,7 +49,7 @@ Then in your template, you can use the `async` pipe to unwrap the binding.
 ```ts
 import { Component } from '@angular/core';
 import { AngularFireDatabase } from 'angularfire2/database';
-import { Observable } from 'rxjs/Observable';
+import { Observable } from 'rxjs';
 
 @Component({
   selector: 'app-root',
@@ -125,7 +125,7 @@ itemRef.remove();
 ```ts
 import { Component } from '@angular/core';
 import { AngularFireDatabase, AngularFireObject } from 'angularfire2/database';
-import { Observable } from 'rxjs/Observable';
+import { Observable } from 'rxjs';
 
 @Component({
   selector: 'app-root',

docs/rtdb/querying-lists.md

@@ -55,8 +55,10 @@ When we call [`switchMap` on the Subject](https://www.learnrxjs.io/operators/tra
 
 ```ts
 const size$ = new Subject<string>();
-const queryObservable = size$.switchMap(size =>
-  db.list('/items', ref => ref.orderByChild('size').equalTo(size)).valueChanges()
+const queryObservable = size$.pipe(
+  switchMap(size => 
+    db.list('/items', ref => ref.orderByChild('size').equalTo(size)).valueChanges()
+  )
 );
 
 // subscribe to changes
@@ -78,10 +80,8 @@ size$.next('small');
 ```ts
 import { Component } from '@angular/core';
 import { AngularFireDatabase, AngularFireAction } from 'angularfire2/database';
-import { Observable } from 'rxjs/Observable';
-import { BehaviorSubject } from 'rxjs/BehaviorSubject';
-import { Subscription } from 'rxjs/Subscription';
-import 'rxjs/add/operator/switchMap';
+import { Observable, Subscription, BehaviorSubject } from 'rxjs';
+import { switchMap } 'rxjs/operators';
 
 @Component({
   selector: 'app-root',
@@ -115,10 +115,12 @@ export class AppComponent {
   
   constructor(db: AngularFireDatabase) {
     this.size$ = new BehaviorSubject(null);
-    this.items$ = this.size$.switchMap(size =>
-      db.list('/items', ref =>
-        size ? ref.orderByChild('size').equalTo(size) : ref
-      ).snapshotChanges()
+    this.items$ = this.size$.pipe(
+      switchMap(size => 
+        db.list('/items', ref =>
+          size ? ref.orderByChild('size').equalTo(size) : ref
+        ).snapshotChanges()
+      )
     );
   }
   filterBy(size: string|null) {

docs/version-5-upgrade.md

@@ -43,9 +43,11 @@ constructor(afDb: AngularFireDatabase) {
 ### 5.0
 ```ts
 constructor(afDb: AngularFireDatabase) {
-  afDb.list('items').snapshotChanges().map(actions => {
-    return actions.map(action => ({ key: action.key, ...action.payload.val() }));
-  }).subscribe(items => {
+  afDb.list('items').snapshotChanges().pipe(
+    map(actions => 
+      actions.map(a => ({ key: a.key, ...a.payload.val() }))
+    )
+  ).subscribe(items => {
     return items.map(item => item.key);
   });
 }