diff --git a/src/demo-app/a11y/table/table-a11y.ts b/src/demo-app/a11y/table/table-a11y.ts index 50fcc2c94114..ab7c48807422 100644 --- a/src/demo-app/a11y/table/table-a11y.ts +++ b/src/demo-app/a11y/table/table-a11y.ts @@ -11,6 +11,8 @@ import {DataSource} from '@angular/cdk/table'; import {BehaviorSubject} from 'rxjs/BehaviorSubject'; import {Observable} from 'rxjs/Observable'; import {MatSort, MatPaginator} from '@angular/material'; +import {merge} from 'rxjs/observable/merge'; +import {map} from 'rxjs/operators/map'; export interface UserData { name: string; @@ -78,9 +80,7 @@ export class SortDataSource extends DataSource { this._sort.sortChange, ]; - return Observable.merge(...displayDataChanges).map(() => { - return this.getSortedData(); - }); + return merge(...displayDataChanges).pipe(map(() => this.getSortedData())); } disconnect() {} @@ -111,11 +111,14 @@ export class PaginatedDataSource extends DataSource { this._paginator.page, ]; - return Observable.merge(...displayDataChanges).map(() => { - const data = [...exampleData]; - const startIndex = this._paginator.pageIndex * this._paginator.pageSize; - return data.splice(startIndex, this._paginator.pageSize); - }); + return merge(...displayDataChanges) + .pipe( + map(() => { + const data = [...exampleData]; + const startIndex = this._paginator.pageIndex * this._paginator.pageSize; + return data.splice(startIndex, this._paginator.pageSize); + }) + ); } disconnect() {} diff --git a/src/demo-app/autocomplete/autocomplete-demo.ts b/src/demo-app/autocomplete/autocomplete-demo.ts index 9a6dcf6efc63..3a70ab24a490 100644 --- a/src/demo-app/autocomplete/autocomplete-demo.ts +++ b/src/demo-app/autocomplete/autocomplete-demo.ts @@ -8,8 +8,8 @@ import {Component, ViewChild, ViewEncapsulation} from '@angular/core'; import {FormControl, NgModel} from '@angular/forms'; -import 'rxjs/add/operator/startWith'; -import 'rxjs/add/operator/map'; +import {startWith} from 'rxjs/operators/startWith'; +import {map} from 'rxjs/operators/map'; export interface State { code: string; @@ -101,9 +101,11 @@ export class AutocompleteDemo { this.tdStates = this.states; this.stateCtrl = new FormControl({code: 'CA', name: 'California'}); this.reactiveStates = this.stateCtrl.valueChanges - .startWith(this.stateCtrl.value) - .map(val => this.displayFn(val)) - .map(name => this.filterStates(name)); + .pipe( + startWith(this.stateCtrl.value), + map(val => this.displayFn(val)), + map(name => this.filterStates(name)) + ); this.filteredGroupedStates = this.groupedStates = this.states.reduce((groups, state) => { let group = groups.find(g => g.letter === state.name[0]); diff --git a/src/demo-app/overlay/overlay-demo.ts b/src/demo-app/overlay/overlay-demo.ts index 1203d94bb495..54d2ed256cb0 100644 --- a/src/demo-app/overlay/overlay-demo.ts +++ b/src/demo-app/overlay/overlay-demo.ts @@ -16,8 +16,8 @@ import { ViewContainerRef, ViewEncapsulation, } from '@angular/core'; -import 'rxjs/add/operator/do'; -import 'rxjs/add/operator/filter'; +import {filter} from 'rxjs/operators/filter'; +import {tap} from 'rxjs/operators/tap'; @Component({ @@ -122,9 +122,10 @@ export class OverlayDemo { .attach(new ComponentPortal(KeyboardTrackingPanel, this.viewContainerRef)); overlayRef.keydownEvents() - .do(e => componentRef.instance.lastKeydown = e.key) - .filter(e => e.key === 'Escape') - .subscribe(() => overlayRef.detach()); + .pipe( + tap(e => componentRef.instance.lastKeydown = e.key), + filter(e => e.key === 'Escape') + ).subscribe(() => overlayRef.detach()); } } diff --git a/src/demo-app/table/person-data-source.ts b/src/demo-app/table/person-data-source.ts index a0eabf217b5b..d8caa57255cf 100644 --- a/src/demo-app/table/person-data-source.ts +++ b/src/demo-app/table/person-data-source.ts @@ -10,8 +10,8 @@ import {MatPaginator, MatSort} from '@angular/material'; import {DataSource} from '@angular/cdk/collections'; import {Observable} from 'rxjs/Observable'; import {PeopleDatabase, UserData} from './people-database'; -import 'rxjs/add/observable/merge'; -import 'rxjs/add/operator/map'; +import {merge} from 'rxjs/observable/merge'; +import {map} from 'rxjs/operators/map'; export class PersonDataSource extends DataSource { constructor(private _peopleDatabase: PeopleDatabase, @@ -26,13 +26,13 @@ export class PersonDataSource extends DataSource { this._sort.sortChange, this._peopleDatabase.dataChange ]; - return Observable.merge(...displayDataChanges).map(() => { + return merge(...displayDataChanges).pipe(map(() => { const data = this.getSortedData(); // Grab the page's slice of data. const startIndex = this._paginator.pageIndex * this._paginator.pageSize; return data.splice(startIndex, this._paginator.pageSize); - }); + })); } disconnect() { diff --git a/src/demo-app/table/person-detail-data-source.ts b/src/demo-app/table/person-detail-data-source.ts index 975fa1e8298b..78666de2b43b 100644 --- a/src/demo-app/table/person-detail-data-source.ts +++ b/src/demo-app/table/person-detail-data-source.ts @@ -9,8 +9,7 @@ import {DataSource} from '@angular/cdk/collections'; import {Observable} from 'rxjs/Observable'; import {UserData} from './people-database'; -import 'rxjs/add/observable/merge'; -import 'rxjs/add/operator/map'; +import {map} from 'rxjs/operators/map'; import {PersonDataSource} from './person-data-source'; export interface DetailRow { @@ -24,7 +23,7 @@ export class PersonDetailDataSource extends DataSource { } connect(): Observable<(UserData|DetailRow)[]> { - return this._personDataSource.connect().map(data => { + return this._personDataSource.connect().pipe(map(data => { const rows: (UserData|DetailRow)[] = []; // Interweave a detail data object for each row data object that will be used for displaying @@ -32,7 +31,7 @@ export class PersonDetailDataSource extends DataSource { data.forEach(person => rows.push(person, {detailRow: true, data: person})); return rows; - }); + })); } disconnect() { diff --git a/src/demo-app/table/table-demo.ts b/src/demo-app/table/table-demo.ts index 2b73619f5716..6fd8d9f70a89 100644 --- a/src/demo-app/table/table-demo.ts +++ b/src/demo-app/table/table-demo.ts @@ -13,10 +13,9 @@ import {MatPaginator, MatSort, MatTableDataSource} from '@angular/material'; import {DetailRow, PersonDetailDataSource} from './person-detail-data-source'; import {animate, state, style, transition, trigger} from '@angular/animations'; import {SelectionModel} from '@angular/cdk/collections'; -import {Observable} from 'rxjs/Observable'; -import 'rxjs/add/operator/distinctUntilChanged'; -import 'rxjs/add/operator/debounceTime'; -import 'rxjs/add/observable/fromEvent'; +import {distinctUntilChanged} from 'rxjs/operators/distinctUntilChanged'; +import {debounceTime} from 'rxjs/operators/debounceTime'; +import {fromEvent} from 'rxjs/observable/fromEvent'; export type UserProperties = 'userId' | 'userName' | 'progress' | 'color' | undefined; @@ -88,13 +87,14 @@ export class TableDemo { ngOnInit() { this.connect(); - Observable.fromEvent(this.filter.nativeElement, 'keyup') - .debounceTime(150) - .distinctUntilChanged() - .subscribe(() => { - this.paginatorForDataSource.pageIndex = 0; - this.matTableDataSource.filter = this.filter.nativeElement.value; - }); + fromEvent(this.filter.nativeElement, 'keyup') + .pipe( + debounceTime(150), + distinctUntilChanged() + ).subscribe(() => { + this.paginatorForDataSource.pageIndex = 0; + this.matTableDataSource.filter = this.filter.nativeElement.value; + }); } /** Whether all filtered rows are selected. */ diff --git a/src/material-examples/autocomplete-display/autocomplete-display-example.ts b/src/material-examples/autocomplete-display/autocomplete-display-example.ts index 97c722813d6a..acfc205c0abe 100644 --- a/src/material-examples/autocomplete-display/autocomplete-display-example.ts +++ b/src/material-examples/autocomplete-display/autocomplete-display-example.ts @@ -1,8 +1,8 @@ import {Component} from '@angular/core'; import {FormControl} from '@angular/forms'; import {Observable} from 'rxjs/Observable'; -import 'rxjs/add/operator/startWith'; -import 'rxjs/add/operator/map'; +import {startWith} from 'rxjs/operators/startWith'; +import {map} from 'rxjs/operators/map'; export class User { constructor(public name: string) { } @@ -30,9 +30,11 @@ export class AutocompleteDisplayExample { ngOnInit() { this.filteredOptions = this.myControl.valueChanges - .startWith(null) - .map(user => user && typeof user === 'object' ? user.name : user) - .map(name => name ? this.filter(name) : this.options.slice()); + .pipe( + startWith({} as User), + map(user => user && typeof user === 'object' ? user.name : user), + map(name => name ? this.filter(name) : this.options.slice()) + ); } filter(name: string): User[] { diff --git a/src/material-examples/autocomplete-filter/autocomplete-filter-example.ts b/src/material-examples/autocomplete-filter/autocomplete-filter-example.ts index ffa103ae0cef..060ef241db3f 100644 --- a/src/material-examples/autocomplete-filter/autocomplete-filter-example.ts +++ b/src/material-examples/autocomplete-filter/autocomplete-filter-example.ts @@ -1,8 +1,8 @@ import {Component} from '@angular/core'; import {FormControl} from '@angular/forms'; import {Observable} from 'rxjs/Observable'; -import 'rxjs/add/operator/startWith'; -import 'rxjs/add/operator/map'; +import {startWith} from 'rxjs/operators/startWith'; +import {map} from 'rxjs/operators/map'; /** * @title Filter autocomplete @@ -24,15 +24,17 @@ export class AutocompleteFilterExample { filteredOptions: Observable; - ngOnInit() { - this.filteredOptions = this.myControl.valueChanges - .startWith('') - .map(val => this.filter(val)); - } + ngOnInit() { + this.filteredOptions = this.myControl.valueChanges + .pipe( + startWith(''), + map(val => this.filter(val)) + ); + } - filter(val: string): string[] { - return this.options.filter(option => - option.toLowerCase().indexOf(val.toLowerCase()) === 0); - } + filter(val: string): string[] { + return this.options.filter(option => + option.toLowerCase().indexOf(val.toLowerCase()) === 0); + } } diff --git a/src/material-examples/autocomplete-overview/autocomplete-overview-example.ts b/src/material-examples/autocomplete-overview/autocomplete-overview-example.ts index ee2a166b91a0..b010728d83cd 100644 --- a/src/material-examples/autocomplete-overview/autocomplete-overview-example.ts +++ b/src/material-examples/autocomplete-overview/autocomplete-overview-example.ts @@ -2,8 +2,12 @@ import {Component} from '@angular/core'; import {FormControl} from '@angular/forms'; import {Observable} from 'rxjs/Observable'; -import 'rxjs/add/operator/startWith'; -import 'rxjs/add/operator/map'; +import {startWith} from 'rxjs/operators/startWith'; +import {map} from 'rxjs/operators/map'; + +export class State { + constructor(public name: string, public population: string, public flag: string) { } +} /** * @title Autocomplete overview @@ -17,7 +21,7 @@ export class AutocompleteOverviewExample { stateCtrl: FormControl; filteredStates: Observable; - states: any[] = [ + states: State[] = [ { name: 'Arkansas', population: '2.978M', @@ -47,8 +51,10 @@ export class AutocompleteOverviewExample { constructor() { this.stateCtrl = new FormControl(); this.filteredStates = this.stateCtrl.valueChanges - .startWith(null) - .map(state => state ? this.filterStates(state) : this.states.slice()); + .pipe( + startWith(''), + map(state => state ? this.filterStates(state) : this.states.slice()) + ); } filterStates(name: string) { diff --git a/src/material-examples/cdk-table-basic/cdk-table-basic-example.ts b/src/material-examples/cdk-table-basic/cdk-table-basic-example.ts index 80975595e08f..98fe4db30c73 100644 --- a/src/material-examples/cdk-table-basic/cdk-table-basic-example.ts +++ b/src/material-examples/cdk-table-basic/cdk-table-basic-example.ts @@ -2,9 +2,6 @@ import {Component} from '@angular/core'; import {DataSource} from '@angular/cdk/collections'; import {BehaviorSubject} from 'rxjs/BehaviorSubject'; import {Observable} from 'rxjs/Observable'; -import 'rxjs/add/operator/startWith'; -import 'rxjs/add/observable/merge'; -import 'rxjs/add/operator/map'; /** * @title Basic CDK data-table diff --git a/src/material-examples/table-http/table-http-example.ts b/src/material-examples/table-http/table-http-example.ts index de864fce1d73..67f293a49978 100644 --- a/src/material-examples/table-http/table-http-example.ts +++ b/src/material-examples/table-http/table-http-example.ts @@ -2,12 +2,12 @@ import {Component, AfterViewInit, ViewChild} from '@angular/core'; import {HttpClient} from '@angular/common/http'; import {MatPaginator, MatSort, MatTableDataSource} from '@angular/material'; import {Observable} from 'rxjs/Observable'; -import 'rxjs/add/observable/merge'; -import 'rxjs/add/observable/of'; -import 'rxjs/add/operator/catch'; -import 'rxjs/add/operator/map'; -import 'rxjs/add/operator/startWith'; -import 'rxjs/add/operator/switchMap'; +import {merge} from 'rxjs/observable/merge'; +import {of as observableOf} from 'rxjs/observable/of'; +import {catchError} from 'rxjs/operators/catchError'; +import {map} from 'rxjs/operators/map'; +import {startWith} from 'rxjs/operators/startWith'; +import {switchMap} from 'rxjs/operators/switchMap'; /** * @title Table retrieving data through HTTP @@ -37,28 +37,29 @@ export class TableHttpExample implements AfterViewInit { // If the user changes the sort order, reset back to the first page. this.sort.sortChange.subscribe(() => this.paginator.pageIndex = 0); - Observable.merge(this.sort.sortChange, this.paginator.page) - .startWith(null) - .switchMap(() => { + merge(this.sort.sortChange, this.paginator.page) + .pipe( + startWith({}), + switchMap(() => { this.isLoadingResults = true; return this.exampleDatabase!.getRepoIssues( - this.sort.active, this.sort.direction, this.paginator.pageIndex); - }) - .map(data => { + this.sort.active, this.sort.direction, this.paginator.pageIndex); + }), + map(data => { // Flip flag to show that loading has finished. this.isLoadingResults = false; this.isRateLimitReached = false; this.resultsLength = data.total_count; return data.items; - }) - .catch(() => { + }), + catchError(() => { this.isLoadingResults = false; // Catch if the GitHub API has reached its rate limit. Return empty data. this.isRateLimitReached = true; - return Observable.of([]); + return observableOf([]); }) - .subscribe(data => this.dataSource.data = data); + ).subscribe(data => this.dataSource.data = data); } } diff --git a/src/universal-app/kitchen-sink/kitchen-sink.ts b/src/universal-app/kitchen-sink/kitchen-sink.ts index 3eb7b301f771..c04d46e12bf2 100644 --- a/src/universal-app/kitchen-sink/kitchen-sink.ts +++ b/src/universal-app/kitchen-sink/kitchen-sink.ts @@ -1,7 +1,6 @@ import {Component, NgModule} from '@angular/core'; import {ServerModule} from '@angular/platform-server'; import {BrowserModule} from '@angular/platform-browser'; -import {Observable} from 'rxjs/Observable'; import { MatAutocompleteModule, MatButtonModule, @@ -42,7 +41,7 @@ import { DataSource } from '@angular/cdk/table'; -import 'rxjs/add/observable/of'; +import {of as observableOf} from 'rxjs/observable/of'; @Component({ selector: 'kitchen-sink', @@ -56,7 +55,7 @@ export class KitchenSink { /** Data source for the CDK and Material table. */ tableDataSource: DataSource = { - connect: () => Observable.of([{userId: 1}, {userId: 2}]), + connect: () => observableOf([{userId: 1}, {userId: 2}]), disconnect: () => {} }; diff --git a/tools/package-tools/rollup-globals.ts b/tools/package-tools/rollup-globals.ts index 1d08c970d5aa..7da60e9e0468 100644 --- a/tools/package-tools/rollup-globals.ts +++ b/tools/package-tools/rollup-globals.ts @@ -85,16 +85,4 @@ export const rollupGlobals = { 'rxjs/operators/share': 'Rx.Observable', 'rxjs/operators/delay': 'Rx.Observable', 'rxjs/operators/combineLatest': 'Rx.Observable', - - 'rxjs/add/observable/merge': 'Rx.Observable', - 'rxjs/add/observable/fromEvent': 'Rx.Observable', - 'rxjs/add/observable/of': 'Rx.Observable', - 'rxjs/add/observable/interval': 'Rx.Observable', - 'rxjs/add/operator/startWith': 'Rx.Observable.prototype', - 'rxjs/add/operator/map': 'Rx.Observable.prototype', - 'rxjs/add/operator/debounceTime': 'Rx.Observable.prototype', - 'rxjs/add/operator/distinctUntilChanged': 'Rx.Observable.prototype', - 'rxjs/add/operator/first': 'Rx.Observable.prototype', - 'rxjs/add/operator/catch': 'Rx.Observable.prototype', - 'rxjs/add/operator/switchMap': 'Rx.Observable.prototype' }; diff --git a/tools/screenshot-test/src/app/firebase.service.ts b/tools/screenshot-test/src/app/firebase.service.ts index 3fcb235b2bb1..3315c7f416bb 100644 --- a/tools/screenshot-test/src/app/firebase.service.ts +++ b/tools/screenshot-test/src/app/firebase.service.ts @@ -1,7 +1,6 @@ import {Injectable} from '@angular/core'; import {HttpClient} from '@angular/common/http'; import * as firebase from 'firebase'; -import 'rxjs/add/operator/toPromise'; const config = require('../config.json');