batch update operator references

forms/functional_forms.md

@@ -327,7 +327,7 @@ ngOnInit() {
     });
 
   // Dispatch an action when the form is changed.
-  this.ngForm.valueChanges.debounceTime(0)
+  this.ngForm.valueChanges.pipe(debounceTime(0))
     .subscribe(change =>
       this.ngRedux.dispatch(
         saveForm(

handout/architect/10_ways_to_misuse_angular.md

@@ -170,8 +170,9 @@ export class TodoStore {
   }
 
   filteredTodos$() {
-    return this.state$.map(({ filter, todos }) =>
-      todos.filter(todo => this.filterTodoByType(todo, filter));
+    return this.state$.pipe(
+      map(({ filter, todos }) => todos.filter(todo => this.filterTodoByType(todo, filter)))
+    )
   }
 }
 ```
@@ -424,8 +425,11 @@ export class AuthSelectors {
 
   isAuthenticated$(): Observable<boolean> {
     return this.ngRedux.select<AuthToken>(path<AuthToken>(['user', 'token']))
-      .map<AuthToken, boolean>(Boolean)
-      .distinctUntilChanged();
+      pipe(
+        map<AuthToken, boolean>(Boolean), 
+        distinctUntilChanged()
+      );
+
   }
 
   error$(): Observable<Error> {

handout/architect/services.md

@@ -16,12 +16,12 @@ class BlogPage implements OnInit {
   ngOnInit () {
     this.http
       .get(`/api/blogs/`)
-      .map(response => response.json())
+      .pipe(map(response => response.json()))
       .subscribe(data => {
         this.blogs = data.blogs;
         this.http
           .get(`/api/users/me/`)
-          .map(response => response.json())
+          .pipe(map(response => response.json()))
           .subscribe(user => {
             if (this.blogs == null) return;
             this.filterBlogsByAccess(user);
@@ -83,14 +83,18 @@ class BlogPage implements OnInit {
 
   private getBlogs () {
     return this.http.get('/api/blogs/')
-      .map(response => response.json())
-      .do(data => this.blogs = data.blogs);
+      .pipe(
+        map(response => response.json()), 
+        tap(this.blogs = data.blogs)
+      );
   }
 
   private getUser () {
     return this.http.get('/api/users/me/')
-      .map(response => response.json())
-      .do(user => this.user = user);
+      .pipe(
+        map(response => response.json()), 
+        tap(user => this.user = user)
+      );
   }
 
   private filterBlogsByAccess (user) {
@@ -160,7 +164,7 @@ instead of entire methods:
 ```typescript
 // Get data from server.
 const fetchJSON = (http, url) =>
-  http.get(url).map(response => response.json());
+  http.get(url).pipe(map(response => response.json()));
 
 // Return a new array filled with old values.
 const filterByUserAccess = user => blogs =>
@@ -174,9 +178,9 @@ const sortBlogsByDate = direction => blogs =>
 const fetchFilteredBlogs = http => {
   const userStream = fetchJSON(http, `/api/users/me/`);
   const blogStream = fetchJSON(http, `/api/blogs/`)
-    .map(({blogs}) => blogs);
-  const filterStream = userStream.mergeMap(user =>
-    blogStream.filter(filterByUserAccess(user)));
+    .pipe(map(({blogs}) => blogs));
+  const filterStream = userStream
+    .pipe(mergeMap(user => blogStream.filter(filterByUserAccess(user))));
   return filterStream;
 };
 
@@ -190,7 +194,7 @@ class BlogPage implements OnInit {
 
   private loadPage (http) {
     fetchFilteredBlogs(http)
-      .map(sortBlogsByDate(`desc`))
+      .pipe(map(sortBlogsByDate(`desc`)))
       .subscribe(blogs => this.blogs = blogs);
   }
 }
@@ -242,8 +246,10 @@ export class UserService {
 
   getUser () {
     return this.http.get('/api/users/me/')
-      .map(response => response.json())
-      .map(data => User.fromServer(data));
+      .pipe(
+        map(response => response.json()),
+        map(data => User.fromServer(data))
+      )
   }
 }
 ```
@@ -273,8 +279,7 @@ export class AuthorizedBlogService {
     const userStream = userService.getUser();
     const blogStream = blogService.getBlogs();
 
-    return userStream.mergeMap(user =>
-      blogStream.filter(filterByUserAccess(user)));
+    return userStream.pipe(mergeMap(user => blogStream.filter(filterByUserAccess(user))));
   }
 }
 ```
@@ -309,7 +314,7 @@ class BlogPage implements OnInit {
 
   private loadPage () {
     this.blogService.getBlogs()
-      .map(sortBlogsByDate(`desc`))
+      .pipe(map(sortBlogsByDate(`desc`)))
       .subscribe(blogs => this.blogs = blogs);
   }
 }

http/catching-rejections/README.md

@@ -18,7 +18,7 @@ export class AuthService {
     };
 
     this.http.post(`${ BASE_URL }/auth/login`, payload)
-      .map(response => response.json())
+      .pipe(map(response => response.json()))
       .subscribe(
         authData => this.storeToken(authData.id_token),
         (err) => console.error(err),

http/catching-rejections/catch_and_release.md

@@ -5,6 +5,7 @@ We also have the option of using the `.catch` operator. It allows us to catch er
 ```typescript
 import { Http } from '@angular/http';
 import { Injectable } from '@angular/core';
+import { map, catchError } from 'rxjs/operators';
 
 @Injectable()
 export class SearchService {
@@ -13,12 +14,12 @@ export class SearchService {
 
   search(term: string) {
     return this.http.get('https://api.spotify.com/v1/dsds?q=' + term + '&type=artist')
-      .map((response) => response.json())
-      .catch((e) => {
-        return Observable.throw(
-          new Error(`${ e.status } ${ e.statusText }`)
-        );
-      });
+      .pipe(
+        map(response => response.json()),
+        catchError((e) => {
+          return Observable.throw(new Error(`${ e.status } ${ e.statusText }`));
+        })
+      )
   }
 }
 ```
@@ -35,16 +36,18 @@ export class SearchService {
 
   search(term: string) {
     return this.http.get(`https://api.spotify.com/v1/dsds?q=${term}&type=artist`)
-      .map(response => response.json())
-      .catch(e => {
+      .pipe(
+        map(response => response.json()), 
+        catchError(e => {
         if (e.status >==  500) {
           return cachedVersion();
         } else {
           return Observable.throw(
             new Error(`${ e.status } ${ e.statusText }`)
           );
         }
-      });
+      }))
+
   }
 }
 ```

http/catching-rejections/retry.md

@@ -11,7 +11,8 @@ Note that the error callback is not invoked during the retry phase. If the reque
 ```typescript
 import { Http } from '@angular/http';
 import { Injectable } from '@angular/core';
-import { Observable } from 'rxjs/Rx';
+import { Observable } from 'rxjs';
+import { map, retry } from 'rxjs/operators';
 
 @Injectable()
 export class SearchService {
@@ -21,8 +22,9 @@ export class SearchService {
   search(term: string) {
     let tryCount = 0;
     return this.http.get('https://api.spotify.com/v1/dsds?q=' + term + '&type=artist')
-      .map(response => response.json())
-      .retry(3);
+      .pipe(map(response => response.json()),
+       retry(3));
+
   }
 }
 ```

http/making_requests.md

@@ -5,8 +5,8 @@ To make HTTP requests we will use the `Http` service. In this example we are cre
 ```typescript
 import { HttpClient } from '@angular/http/common';
 import { Injectable } from '@angular/core';
-import { Observable } from 'rxjs/Observable';
-import 'rxjs/add/operator/map';
+import { Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
 
 @Injectable()
 export class SearchService {
@@ -16,14 +16,14 @@ export class SearchService {
   search(term: string) {
     return this.http
       .get('https://api.spotify.com/v1/search?q=' + term + '&type=artist')
-      .map(response => response.json());
+      .pipe(map(response => response.json()))
   }
 }
 ```
 
 [View Example](http://plnkr.co/edit/C8Zv9i?p=preview)
 
-Here we are making an HTTP GET request which is exposed to us as an observable. You will notice the `.map` operator chained to `.get`. The `HttpClient` service provides us with the raw response as a string. In order to consume the fetched data we have to convert it to JSON.
+Here we are making an HTTP GET request which is exposed to us as an observable. You will notice the `map` operator utilized in the pipe, after the `.get`. The `HttpClient` service provides us with the raw response as a string. In order to consume the fetched data we have to convert it to JSON.
 
 In addition to `HttpClient.get()`, there are also `HttpClient.post()`, `HttpClient.put()`, `HttpClient.delete()`, etc. They all return observables.
 

http/requests_as_promises.md

@@ -7,19 +7,18 @@ The observable returned by Angular http client can be converted it into a promis
 ```typescript
 import { HttpClient } from '@angular/http/common';
 import { Injectable } from '@angular/core';
-import 'rxjs/add/operator/map';
-import 'rxjs/add/operator/toPromise';
+import { map } from 'rxjs/operators';
 
 @Injectable()
 export class SearchService {
 
   constructor(private http: HttpClient) {}
 
   search(term: string) {
-    return this.http
-      .get(`https://api.spotify.com/v1/search?q=${term}&type=artist`)
-      .map((response) => response.json())
-      .toPromise();
+    return this.http.pipe(
+      get(`https://api.spotify.com/v1/search?q=${term}&type=artist`),
+      map((response) => response.json())
+    ).toPromise();
   }
 }
 ```

http/search_with_mergemap.md

@@ -18,7 +18,7 @@ _app/services/search.service.ts_
 ```javascript
 import {Http} from '@angular/http';
 import {Injectable} from '@angular/core';
-import {map} from '@rxjs/operators';
+import {map} from 'rxjs/operators';
 
 @Injectable()
 export class SearchService {
@@ -46,7 +46,7 @@ import { FormControl,
     FormGroup,
     FormBuilder } from '@angular/forms';
 import { SearchService } from './services/search.service';
-import { map } from '@rxjs/operators';
+import { map } from 'rxjs/operators';
 
 @Component({
     selector: 'app-root',

http/search_with_switchmap.md

@@ -56,7 +56,7 @@ import { FormControl,
     FormGroup,
     FormBuilder } from '@angular/forms';
 import { SearchService } from './services/search.service';
-import { debounceTime, switchMap } from '@rxjs/operators';
+import { debounceTime, switchMap } from 'rxjs/operators';
 
 @Component({
     selector: 'app-root',

observables/using_observables_from_other_sources.md

@@ -11,7 +11,7 @@ A common operation in any web application is getting or posting data to a server
 ```javascript
 import {Component} from '@angular/core';
 import {Http} from '@angular/http';
-import {mergeMap} from '@rxjs/operators';
+import {mergeMap} from 'rxjs/operators';
 
 @Component({
     selector: 'app',
@@ -47,7 +47,7 @@ Let's take a look at how `Observables` are used in Angular forms. Each field in
 ```javascript
 import {Component} from '@angular/core';
 import {FormControl, FormGroup, FormBuilder} from '@angular/forms';
-import { map } from '@rxjs/operators';
+import { map } from 'rxjs/operators';
 
 @Component({
     selector: 'app',

pipes/stateful_and_async_pipes.md

@@ -35,7 +35,7 @@ export class AnimateNumberPipe implements PipeTransform {
       const difference = this.targetNumber - this.currentNumber
 
       Observable.interval(100)
-        .take(difference)
+        .pipe(take(difference))
         .subscribe(() => {
           this.currentNumber++;
         })

state-management/ngrx/configuring_your_application.md

@@ -12,8 +12,6 @@ import {HttpClientModule} from '@angular/http';
 import {StoreModule} from '@ngrx/store';
 import {EffectsModule} from '@ngrx/effects';
 
-import 'rxjs/Rx';
-
 import {rootReducer} from './store/rootReducer';
 import {CounterActions} from './store/actions';
 import {CounterEffects} from './store/effects';

state-management/ngrx/modifying_your_application_state_by_dispatching_actions.md

@@ -68,7 +68,7 @@ export class CounterActions {
 
   incrementIfOdd() {
     this.store.select(appState => appState.counter.currentValue)
-      .take(1)
+      .pipe(take(1))
       .subscribe(currentValue => {
         if (currentValue % 2 !== 0) {
           this.store.dispatch(createAction(CounterActions.INCREMENT);

state-management/ngrx/reading_your_application_state_using_selectors.md

@@ -34,6 +34,7 @@ _app/services/counter.service.ts_
 import {Injectable} from '@angular/core';
 import {Store} from '@ngrx/store';
 import {Observable} from 'rxjs/Observable';
+import {filter} from 'rxjs/operators';
 
 import {AppState} from '../models';
 
@@ -44,7 +45,7 @@ export class CounterService {
 
   getCurrentValue(): Observable<number> {
     return this.store.select(appState => appState.counter.currentValue)
-      .filter(Boolean);
+      .pipe(filter(Boolean))
   }
 
 }

state-management/ngrx/side_effects.md

@@ -33,9 +33,10 @@ export class CustomizationEffects {
   @Effect()
   login$ = this.actions$
     .ofType(SessionActions.LOGIN_SEND_SUCCESS)
-    .mergeMap<Action>(action => this.apiService.getCustomizations(action.payload.userId)
-      .map(result => createAction(CustomizationActions.CUSTOMIZATIONS_RETRIEVE_SUCCESS, result.json()))
-      .catch(error => Observable.of(createAction(CustomizationActions.CUSTOMIZATIONS_RETRIEVE_ERROR, error.json())))
+    .pipe(
+      mergeMap<Action>(action => this.apiService.getCustomizations(action.payload.userId)),
+      map(result => createAction(CustomizationActions.CUSTOMIZATIONS_RETRIEVE_SUCCESS, result.json())),
+      catchError(error => Observable.of(createAction(CustomizationActions.CUSTOMIZATIONS_RETRIEVE_ERROR, error.json())))
     );
 
 }

testing/services/http/README.md

@@ -22,8 +22,8 @@ export class SearchWiki {
     return this.http.get(
       'https://en.wikipedia.org/w/api.php?' +
       'action=query&list=search&srsearch=' + term
-    ).map((response) => response.json());
-  }
+    ).pipe(map(response => response.json()))
+}
 
   searchXML(term: string): Observable<any> {
     return this.http.get(