chore: switch to rxjs lettables

src/app/material-docs-app.ts

@@ -1,6 +1,6 @@
 import {Component, ViewEncapsulation} from '@angular/core';
 import {Router, NavigationEnd} from '@angular/router';
-import 'rxjs/add/operator/filter';
+import {filter} from 'rxjs/operators/filter';
 
 
 @Component({
@@ -15,7 +15,7 @@ export class MaterialDocsApp {
     let previousRoute = router.routerState.snapshot.url;
 
     router.events
-      .filter(event => event instanceof NavigationEnd )
+      .pipe(filter(event => event instanceof NavigationEnd))
       .subscribe((data: NavigationEnd) => {
         // We want to reset the scroll position on navigation except when navigating within
         // the documentation for a single component.

src/app/pages/component-category-list/component-category-list.ts

@@ -6,7 +6,7 @@ import {DocumentationItems, SECTIONS} from '../../shared/documentation-items/doc
 import {ComponentPageTitle} from '../page-title/page-title';
 import {SvgViewerModule} from '../../shared/svg-viewer/svg-viewer';
 import {Observable} from 'rxjs/Observable';
-import 'rxjs/add/observable/combineLatest';
+import {combineLatest} from 'rxjs/observable/combineLatest';
 import {Subscription} from 'rxjs/Subscription';
 
 
@@ -25,7 +25,7 @@ export class ComponentCategoryList implements OnInit, OnDestroy {
 
   ngOnInit() {
     // Combine params from all of the path into a single object.
-    this.params = Observable.combineLatest(
+    this.params = combineLatest(
       this._route.pathFromRoot.map(route => route.params),
       Object.assign);
 

src/app/pages/component-list/component-list.ts

@@ -9,7 +9,7 @@ import {SvgViewerModule} from '../../shared/svg-viewer/svg-viewer';
 import {CommonModule} from '@angular/common';
 import {MatCardModule} from '@angular/material';
 import {Observable} from 'rxjs/Observable';
-import 'rxjs/add/observable/combineLatest';
+import {combineLatest} from 'rxjs/observable/combineLatest';
 
 @Component({
   selector: 'app-components',
@@ -24,8 +24,7 @@ export class ComponentList {
               private _componentPageTitle: ComponentPageTitle,
               private _route: ActivatedRoute,
               public router: Router) {
-    Observable
-      .combineLatest(_route.pathFromRoot.map(route => route.params), Object.assign)
+    combineLatest(_route.pathFromRoot.map(route => route.params), Object.assign)
       .subscribe(p => {
         this.category = docItems.getCategoryById(p['id']);
         this.section = p['section'];

src/app/pages/component-page-header/component-page-header.ts

@@ -1,5 +1,4 @@
 import {Component, EventEmitter, NgModule, Output} from '@angular/core';
-import 'rxjs/add/operator/first';
 import {ComponentPageTitle} from '../page-title/page-title';
 import {NavigationFocusModule} from '../../shared/navigation-focus/navigation-focus';
 import {MatButtonModule, MatIconModule} from '@angular/material';

src/app/pages/component-sidenav/component-sidenav.ts

@@ -7,6 +7,7 @@ import {CommonModule} from '@angular/common';
 import {ComponentHeaderModule} from '../component-page-header/component-page-header';
 import {FooterModule} from '../../shared/footer/footer';
 import {Observable} from 'rxjs/Observable';
+import {combineLatest} from 'rxjs/observable/combineLatest';
 
 const SMALL_WIDTH_BREAKPOINT = 720;
 
@@ -39,7 +40,7 @@ export class ComponentSidenav implements OnInit {
     });
 
     // Combine params from all of the path into a single object.
-    this.params = Observable.combineLatest(
+    this.params = combineLatest(
       this._route.pathFromRoot.map(route => route.params),
       Object.assign);
   }

src/app/pages/component-viewer/component-viewer.ts

@@ -2,13 +2,12 @@ import {CommonModule} from '@angular/common';
 import {Component, ElementRef, NgModule, OnInit, ViewChild, ViewEncapsulation} from '@angular/core';
 import {MatTabsModule} from '@angular/material';
 import {ActivatedRoute, Params, Router, RouterModule} from '@angular/router';
-import 'rxjs/add/operator/map';
-import {Observable} from 'rxjs/Observable';
 import {DocViewerModule} from '../../shared/doc-viewer/doc-viewer-module';
 import {DocItem, DocumentationItems} from '../../shared/documentation-items/documentation-items';
 import {TableOfContentsModule} from '../../shared/table-of-contents/table-of-contents.module';
 import {ComponentPageTitle} from '../page-title/page-title';
-
+import {combineLatest} from 'rxjs/observable/combineLatest';
+import {map} from 'rxjs/operators/map';
 
 @Component({
   selector: 'app-component-viewer',
@@ -27,10 +26,9 @@ export class ComponentViewer {
               public docItems: DocumentationItems) {
     // Listen to changes on the current route for the doc id (e.g. button/checkbox) and the
     // parent route for the section (material/cdk).
-    Observable.combineLatest(_route.params, _route.parent.params)
-        .map((p: [Params, Params]) => ({id: p[0]['id'], section: p[1]['section']}))
-        .map(p => docItems.getItemById(p.id, p.section))
-        .subscribe(d => {
+    combineLatest(_route.params, _route.parent.params).pipe(
+        map((p: [Params, Params]) => ({id: p[0]['id'], section: p[1]['section']})),
+        map(p => docItems.getItemById(p.id, p.section))).subscribe(d => {
           this.componentDocItem = d;
           if (this.componentDocItem) {
             this._componentPageTitle.title = `${this.componentDocItem.name}`;

src/app/shared/example-viewer/example-viewer.ts

@@ -1,7 +1,6 @@
 import {Component, Input} from '@angular/core';
 import {MatSnackBar} from '@angular/material';
 import {ComponentPortal} from '@angular/cdk/portal';
-import 'rxjs/add/operator/first';
 
 import {EXAMPLE_COMPONENTS, LiveExample} from '@angular/material-examples';
 import {CopierService} from '../copier/copier.service';

src/app/shared/stackblitz/stackblitz-writer.ts

@@ -1,7 +1,6 @@
 import {Injectable} from '@angular/core';
 import {Http} from '@angular/http';
 import {ExampleData} from '@angular/material-examples';
-import 'rxjs/add/operator/toPromise';
 import {VERSION} from '@angular/material';
 
 const STACKBLITZ_URL = 'https://run.stackblitz.com/api/angular/v1/';

src/app/shared/table-of-contents/table-of-contents.ts

@@ -1,11 +1,11 @@
 import {Component, ElementRef, Inject, Input, OnInit} from '@angular/core';
 import {DOCUMENT} from '@angular/platform-browser';
 import {ActivatedRoute, NavigationEnd, Router} from '@angular/router';
-import 'rxjs/add/observable/fromEvent';
-import 'rxjs/add/operator/debounceTime';
-import 'rxjs/add/operator/takeUntil';
-import {Observable} from 'rxjs/Observable';
 import {Subject} from 'rxjs/Subject';
+import {debounceTime} from 'rxjs/operators/debounceTime';
+import {takeUntil} from 'rxjs/operators/takeUntil';
+import {fromEvent} from 'rxjs/observable/fromEvent';
+
 
 interface Link {
   /* id of the section*/
@@ -45,7 +45,7 @@ export class TableOfContents implements OnInit {
               private _element: ElementRef,
               @Inject(DOCUMENT) private _document: Document) {
 
-    this._router.events.takeUntil(this._destroyed).subscribe((event) => {
+    this._router.events.pipe(takeUntil(this._destroyed)).subscribe((event) => {
       if (event instanceof NavigationEnd) {
         const rootUrl = _router.url.split('#')[0];
         if (rootUrl !== this._rootUrl) {
@@ -55,7 +55,7 @@ export class TableOfContents implements OnInit {
       }
     });
 
-    this._route.fragment.takeUntil(this._destroyed).subscribe(fragment => {
+    this._route.fragment.pipe(takeUntil(this._destroyed)).subscribe(fragment => {
       this._urlFragment = fragment;
 
       const target = document.getElementById(this._urlFragment);
@@ -72,9 +72,9 @@ export class TableOfContents implements OnInit {
       this._scrollContainer = this.container ?
         this._document.querySelectorAll(this.container)[0] : window;
 
-      Observable.fromEvent(this._scrollContainer, 'scroll')
-        .takeUntil(this._destroyed)
-        .debounceTime(10)
+      fromEvent(this._scrollContainer, 'scroll').pipe(
+          takeUntil(this._destroyed),
+          debounceTime(10))
         .subscribe(() => this.onScroll());
     });
   }