From 15b2346dd69555a0eda9ed31d26222c5c64d884f Mon Sep 17 00:00:00 2001
From: Rafael <rafaelsantana3095@gmail.com>
Date: Tue, 12 Jun 2018 20:29:44 -0300
Subject: [PATCH] chore: enforce consistency in material-examples

---
 src/lib/tree/data-source/flat-data-source.ts  |   4 +-
 ...lete-auto-active-first-option-example.html |   2 +-
 ...mplete-auto-active-first-option-example.ts |  15 ++-
 .../autocomplete-display-example.html         |   2 +-
 .../autocomplete-display-example.ts           |  29 ++--
 .../autocomplete-filter-example.html          |   2 +-
 .../autocomplete-filter-example.ts            |  23 ++--
 .../autocomplete-optgroup-example.html        |   8 +-
 .../autocomplete-optgroup-example.ts          |  23 ++--
 .../autocomplete-overview-example.css         |   4 +
 .../autocomplete-overview-example.html        |   6 +-
 .../autocomplete-overview-example.ts          |  24 ++--
 .../autocomplete-simple-example.html          |   2 +-
 .../autocomplete-simple-example.ts            |  13 +-
 .../badge-overview/badge-overview-example.ts  |   5 +-
 .../cdk-table-basic-flex-example.ts           |  30 ++---
 .../cdk-table-basic-example.ts                |  28 ++--
 .../cdk-tree-flat/cdk-tree-flat-example.css   |   2 +-
 .../cdk-tree-flat/cdk-tree-flat-example.html  |   4 +-
 .../cdk-tree-flat/cdk-tree-flat-example.ts    | 125 ++++++++---------
 .../cdk-tree-nested-example.ts                | 102 +++++++-------
 .../chips-autocomplete-example.css            |   2 +-
 .../chips-autocomplete-example.html           |   7 +-
 .../chips-autocomplete-example.ts             |  46 +++----
 .../chips-input/chips-input-example.css       |   2 +-
 .../chips-input/chips-input-example.html      |   4 +-
 .../chips-input/chips-input-example.ts        |  40 +++---
 .../chips-overview-example.html               |   4 +-
 .../chips-stacked/chips-stacked-example.html  |   2 +-
 .../chips-stacked/chips-stacked-example.ts    |  18 ++-
 .../datepicker-custom-header-example.ts       |   9 +-
 .../datepicker-touch-example.html             |   2 +-
 .../datepicker-views-selection-example.ts     |   3 +-
 .../dialog-data/dialog-data-example.ts        |   8 +-
 .../dialog-elements-example.ts                |   4 +-
 .../dialog-overview-example.ts                |  11 +-
 ...expansion-expand-collapse-all-example.html | 113 ++++++++--------
 .../expansion-expand-collapse-all-example.ts  |   2 +-
 .../expansion-overview-example.ts             |   2 +-
 .../expansion-steps-example.html              |   6 +-
 .../expansion-steps-example.ts                |   2 +-
 .../focus-monitor-directives-example.ts       |   4 +-
 .../focus-monitor-focus-via-example.ts        |   2 +-
 .../focus-monitor-overview-example.ts         |   4 +-
 .../form-field-appearance-example.ts          |   2 +-
 .../form-field-custom-control-example.ts      |  53 ++++----
 .../form-field-error-example.ts               |   2 +-
 .../form-field-hint-example.ts                |   2 +-
 .../form-field-label-example.ts               |   2 +-
 .../form-field-overview-example.ts            |   2 +-
 .../form-field-prefix-suffix-example.ts       |   2 +-
 .../form-field-theming-example.ts             |   6 +-
 .../grid-list-dynamic-example.ts              |   9 +-
 .../icon-overview/icon-overview-example.ts    |   2 +-
 .../input-clearable-example.html              |   2 +-
 .../list-sections/list-sections-example.ts    |   9 +-
 .../list-selection/list-selection-example.ts  |   2 +-
 .../nested-menu/nested-menu-example.ts        |   2 +-
 .../paginator-configurable-example.ts         |   2 +-
 .../progress-bar-configurable-example.html    |   4 +-
 ...progress-spinner-configurable-example.html |   2 +-
 .../radio-ng-model/radio-ng-model-example.ts  |   8 +-
 .../select-custom-trigger-example.ts          |   2 +-
 .../select-form/select-form-example.ts        |   7 +-
 .../select-hint-error-example.ts              |   8 +-
 .../select-multiple-example.ts                |   3 +-
 .../select-optgroup-example.html              |   2 +-
 .../select-optgroup-example.ts                |  36 +++--
 .../select-overview-example.html              |   2 +-
 .../select-overview-example.ts                |   7 +-
 .../select-panel-class-example.ts             |   3 +-
 .../select-reset/select-reset-example.ts      |   2 +-
 .../sidenav-drawer-overview-example.html      |   2 +-
 .../sidenav-fixed/sidenav-fixed-example.html  |   2 +-
 .../sidenav-fixed/sidenav-fixed-example.ts    |   6 +-
 .../sidenav-mode/sidenav-mode-example.ts      |   1 -
 .../sidenav-responsive-example.ts             |   4 +-
 .../slide-toggle-forms-example.html           |   8 +-
 .../slide-toggle-forms-example.ts             |   4 +-
 .../slider-configurable-example.ts            |   8 +-
 .../snack-bar-component-example.ts            |   6 +-
 .../sort-overview/sort-overview-example.ts    |  34 +++--
 .../stepper-editable-example.html             |   2 +-
 .../stepper-editable-example.ts               |   4 +-
 .../stepper-optional-example.html             |   2 +-
 .../stepper-optional-example.ts               |   4 +-
 .../stepper-overview-example.ts               |   4 +-
 .../stepper-vertical-example.ts               |   2 +-
 .../tab-nav-bar-basic-example.html            |   2 +-
 .../table-basic-flex-example.ts               |  26 ++--
 .../table-basic/table-basic-example.ts        |  26 ++--
 .../table-dynamic-columns-example.html        |   2 +-
 .../table-dynamic-columns-example.ts          |  48 +++----
 .../table-filtering-example.ts                |  36 +++--
 .../table-footer-row-example.ts               |   2 +-
 .../table-http/table-http-example.html        |  10 +-
 .../table-http/table-http-example.ts          |   2 +-
 .../table-multiple-header-footer-example.ts   |   2 +-
 .../table-overview/table-overview-example.ts  |  38 +++---
 .../table-pagination-example.ts               |   2 +-
 .../table-row-context-example.ts              |   2 +-
 .../table-selection-example.ts                |  44 +++---
 .../table-sorting/table-sorting-example.ts    |  38 +++---
 .../tooltip-custom-class-example.ts           |   2 +-
 .../tooltip-position-example.html             |   2 +-
 .../tree-checklist/tree-checklist-example.ts  |  91 ++++++-------
 .../tree-dynamic/tree-dynamic-example.ts      |  30 ++---
 .../tree-flat-overview-example.ts             | 127 ++++++++----------
 .../tree-loadmore/tree-loadmore-example.ts    |  49 ++++---
 .../tree-nested-overview-example.ts           | 102 +++++++-------
 110 files changed, 840 insertions(+), 871 deletions(-)

diff --git a/src/lib/tree/data-source/flat-data-source.ts b/src/lib/tree/data-source/flat-data-source.ts
index 03d3c8643ae3..70da52226254 100644
--- a/src/lib/tree/data-source/flat-data-source.ts
+++ b/src/lib/tree/data-source/flat-data-source.ts
@@ -11,7 +11,6 @@ import {FlatTreeControl, TreeControl} from '@angular/cdk/tree';
 import {BehaviorSubject, merge, Observable} from 'rxjs';
 import {map, take} from 'rxjs/operators';
 
-
 /**
  * Tree flattener to convert a normal type of node to node with children & level information.
  * Transform nested nodes of type `T` to flattened nodes of type `F`.
@@ -90,7 +89,7 @@ export class MatTreeFlattener<T, F> {
     let currentExpand: boolean[] = [];
     currentExpand[0] = true;
 
-    nodes.forEach((node) => {
+    nodes.forEach(node => {
       let expand = true;
       for (let i = 0; i <= this.getLevel(node); i++) {
         expand = expand && currentExpand[i];
@@ -151,4 +150,3 @@ export class MatTreeFlatDataSource<T, F> extends DataSource<F> {
     // no op
   }
 }
-
diff --git a/src/material-examples/autocomplete-auto-active-first-option/autocomplete-auto-active-first-option-example.html b/src/material-examples/autocomplete-auto-active-first-option/autocomplete-auto-active-first-option-example.html
index 450909469d5d..50dd982f68bb 100644
--- a/src/material-examples/autocomplete-auto-active-first-option/autocomplete-auto-active-first-option-example.html
+++ b/src/material-examples/autocomplete-auto-active-first-option/autocomplete-auto-active-first-option-example.html
@@ -3,7 +3,7 @@
     <input type="text" placeholder="Pick one" aria-label="Number" matInput [formControl]="myControl" [matAutocomplete]="auto">
     <mat-autocomplete autoActiveFirstOption #auto="matAutocomplete">
       <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
-        {{ option }}
+        {{option}}
       </mat-option>
     </mat-autocomplete>
   </mat-form-field>
diff --git a/src/material-examples/autocomplete-auto-active-first-option/autocomplete-auto-active-first-option-example.ts b/src/material-examples/autocomplete-auto-active-first-option/autocomplete-auto-active-first-option-example.ts
index 3a5adb69bfe1..f510c8d2474a 100644
--- a/src/material-examples/autocomplete-auto-active-first-option/autocomplete-auto-active-first-option-example.ts
+++ b/src/material-examples/autocomplete-auto-active-first-option/autocomplete-auto-active-first-option-example.ts
@@ -9,22 +9,23 @@ import {map, startWith} from 'rxjs/operators';
 @Component({
   selector: 'autocomplete-auto-active-first-option-example',
   templateUrl: 'autocomplete-auto-active-first-option-example.html',
-  styleUrls: ['autocomplete-auto-active-first-option-example.css']
+  styleUrls: ['autocomplete-auto-active-first-option-example.css'],
 })
 export class AutocompleteAutoActiveFirstOptionExample implements OnInit {
-  myControl: FormControl = new FormControl();
-  options = ['One', 'Two', 'Three'];
+  myControl = new FormControl();
+  options: string[] = ['One', 'Two', 'Three'];
   filteredOptions: Observable<string[]>;
 
   ngOnInit() {
     this.filteredOptions = this.myControl.valueChanges.pipe(
       startWith(''),
-      map(val => this.filter(val))
+      map(value => this._filter(value))
     );
   }
 
-  filter(val: string): string[] {
-    return this.options.filter(option => option.toLowerCase().indexOf(val.toLowerCase()) === 0);
-  }
+  private _filter(value: string): string[] {
+    const filterValue = value.toLowerCase();
 
+    return this.options.filter(option => option.toLowerCase().indexOf(filterValue) === 0);
+  }
 }
diff --git a/src/material-examples/autocomplete-display/autocomplete-display-example.html b/src/material-examples/autocomplete-display/autocomplete-display-example.html
index 6f7be4623bd0..5daac573cf8c 100644
--- a/src/material-examples/autocomplete-display/autocomplete-display-example.html
+++ b/src/material-examples/autocomplete-display/autocomplete-display-example.html
@@ -3,7 +3,7 @@
     <input type="text" placeholder="Assignee" aria-label="Assignee" matInput [formControl]="myControl" [matAutocomplete]="auto">
     <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
       <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
-        {{ option.name }}
+        {{option.name}}
       </mat-option>
     </mat-autocomplete>
   </mat-form-field>
diff --git a/src/material-examples/autocomplete-display/autocomplete-display-example.ts b/src/material-examples/autocomplete-display/autocomplete-display-example.ts
index eb530ade4f82..adf9aa23b0a3 100644
--- a/src/material-examples/autocomplete-display/autocomplete-display-example.ts
+++ b/src/material-examples/autocomplete-display/autocomplete-display-example.ts
@@ -3,8 +3,8 @@ import {FormControl} from '@angular/forms';
 import {Observable} from 'rxjs';
 import {map, startWith} from 'rxjs/operators';
 
-export class User {
-  constructor(public name: string) { }
+export interface User {
+  name: string;
 }
 
 /**
@@ -13,18 +13,15 @@ export class User {
 @Component({
   selector: 'autocomplete-display-example',
   templateUrl: 'autocomplete-display-example.html',
-  styleUrls: ['autocomplete-display-example.css']
+  styleUrls: ['autocomplete-display-example.css'],
 })
 export class AutocompleteDisplayExample implements OnInit {
-
   myControl = new FormControl();
-
-  options = [
-    new User('Mary'),
-    new User('Shelley'),
-    new User('Igor')
+  options: User[] = [
+    {name: 'Mary'},
+    {name: 'Shelley'},
+    {name: 'Igor'}
   ];
-
   filteredOptions: Observable<User[]>;
 
   ngOnInit() {
@@ -32,17 +29,17 @@ export class AutocompleteDisplayExample implements OnInit {
       .pipe(
         startWith<string | User>(''),
         map(value => typeof value === 'string' ? value : value.name),
-        map(name => name ? this.filter(name) : this.options.slice())
+        map(name => name ? this._filter(name) : this.options.slice())
       );
   }
 
-  filter(name: string): User[] {
-    return this.options.filter(option =>
-      option.name.toLowerCase().indexOf(name.toLowerCase()) === 0);
-  }
-
   displayFn(user?: User): string | undefined {
     return user ? user.name : undefined;
   }
 
+  private _filter(name: string): User[] {
+    const filterValue = name.toLowerCase();
+
+    return this.options.filter(option => option.name.toLowerCase().indexOf(filterValue) === 0);
+  }
 }
diff --git a/src/material-examples/autocomplete-filter/autocomplete-filter-example.html b/src/material-examples/autocomplete-filter/autocomplete-filter-example.html
index 3e685d80a233..3a5aefad2ce2 100644
--- a/src/material-examples/autocomplete-filter/autocomplete-filter-example.html
+++ b/src/material-examples/autocomplete-filter/autocomplete-filter-example.html
@@ -3,7 +3,7 @@
     <input type="text" placeholder="Pick one" aria-label="Number" matInput [formControl]="myControl" [matAutocomplete]="auto">
     <mat-autocomplete #auto="matAutocomplete">
       <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
-        {{ option }}
+        {{option}}
       </mat-option>
     </mat-autocomplete>
   </mat-form-field>
diff --git a/src/material-examples/autocomplete-filter/autocomplete-filter-example.ts b/src/material-examples/autocomplete-filter/autocomplete-filter-example.ts
index 44f70a689606..6425a755beb8 100644
--- a/src/material-examples/autocomplete-filter/autocomplete-filter-example.ts
+++ b/src/material-examples/autocomplete-filter/autocomplete-filter-example.ts
@@ -9,31 +9,24 @@ import {map, startWith} from 'rxjs/operators';
 @Component({
   selector: 'autocomplete-filter-example',
   templateUrl: 'autocomplete-filter-example.html',
-  styleUrls: ['autocomplete-filter-example.css']
+  styleUrls: ['autocomplete-filter-example.css'],
 })
 export class AutocompleteFilterExample implements OnInit {
-
-  myControl: FormControl = new FormControl();
-
-  options = [
-    'One',
-    'Two',
-    'Three'
-  ];
-
+  myControl = new FormControl();
+  options: string[] = ['One', 'Two', 'Three'];
   filteredOptions: Observable<string[]>;
 
   ngOnInit() {
     this.filteredOptions = this.myControl.valueChanges
       .pipe(
         startWith(''),
-        map(val => this.filter(val))
+        map(value => this._filter(value))
       );
   }
 
-  filter(val: string): string[] {
-    return this.options.filter(option =>
-      option.toLowerCase().includes(val.toLowerCase()));
-  }
+  private _filter(value: string): string[] {
+    const filterValue = value.toLowerCase();
 
+    return this.options.filter(option => option.toLowerCase().includes(filterValue));
+  }
 }
diff --git a/src/material-examples/autocomplete-optgroup/autocomplete-optgroup-example.html b/src/material-examples/autocomplete-optgroup/autocomplete-optgroup-example.html
index 9fe26b2409f8..0d9a4bf88c03 100644
--- a/src/material-examples/autocomplete-optgroup/autocomplete-optgroup-example.html
+++ b/src/material-examples/autocomplete-optgroup/autocomplete-optgroup-example.html
@@ -1,12 +1,12 @@
 <form [formGroup]="stateForm">
   <mat-form-field>
-    <input type="text" matInput placeholder="States Group" formControlName="stateGroup" required [matAutocomplete]="autoGroup"/>
+    <input type="text" matInput placeholder="States Group" formControlName="stateGroup" required [matAutocomplete]="autoGroup">
       <mat-autocomplete #autoGroup="matAutocomplete">
         <mat-optgroup *ngFor="let group of stateGroupOptions | async" [label]="group.letter">
           <mat-option *ngFor="let name of group.names" [value]="name">
-            {{ name }}
+            {{name}}
           </mat-option>
       </mat-optgroup>
     </mat-autocomplete>
-  </mat-form-field> 
-</form>  
+  </mat-form-field>
+</form>
diff --git a/src/material-examples/autocomplete-optgroup/autocomplete-optgroup-example.ts b/src/material-examples/autocomplete-optgroup/autocomplete-optgroup-example.ts
index fd43d54b0647..75e0e13cec2a 100644
--- a/src/material-examples/autocomplete-optgroup/autocomplete-optgroup-example.ts
+++ b/src/material-examples/autocomplete-optgroup/autocomplete-optgroup-example.ts
@@ -1,5 +1,5 @@
 import {Component, OnInit} from '@angular/core';
-import {FormGroup, FormBuilder} from '@angular/forms';
+import {FormBuilder, FormGroup} from '@angular/forms';
 import {Observable} from 'rxjs';
 import {startWith, map} from 'rxjs/operators';
 
@@ -8,6 +8,12 @@ export interface StateGroup {
   names: string[];
 }
 
+export const _filter = (opt: string[], value: string): string[] => {
+  const filterValue = value.toLowerCase();
+
+  return opt.filter(item => item.toLowerCase().indexOf(filterValue) === 0);
+};
+
 /**
  * @title Option groups autocomplete
  */
@@ -84,28 +90,23 @@ export class AutocompleteOptgroupExample implements OnInit {
 
   stateGroupOptions: Observable<StateGroup[]>;
 
-  constructor(private fb: FormBuilder) { }
+  constructor(private fb: FormBuilder) {}
 
   ngOnInit() {
     this.stateGroupOptions = this.stateForm.get('stateGroup')!.valueChanges
       .pipe(
         startWith(''),
-        map(val => this.filterGroup(val))
+        map(value => this._filterGroup(value))
       );
   }
 
-  filterGroup(val: string): StateGroup[] {
-    if (val) {
+  private _filterGroup(value: string): StateGroup[] {
+    if (value) {
       return this.stateGroups
-        .map(group => ({ letter: group.letter, names: this._filter(group.names, val) }))
+        .map(group => ({letter: group.letter, names: _filter(group.names, value)}))
         .filter(group => group.names.length > 0);
     }
 
     return this.stateGroups;
   }
-
-  private _filter(opt: string[], val: string) {
-    const filterValue = val.toLowerCase();
-    return opt.filter(item => item.toLowerCase().startsWith(filterValue));
-  }
 }
diff --git a/src/material-examples/autocomplete-overview/autocomplete-overview-example.css b/src/material-examples/autocomplete-overview/autocomplete-overview-example.css
index 08fa67536b1f..ab4bf7bd3dae 100644
--- a/src/material-examples/autocomplete-overview/autocomplete-overview-example.css
+++ b/src/material-examples/autocomplete-overview/autocomplete-overview-example.css
@@ -7,3 +7,7 @@
 .example-full-width {
   width: 100%;
 }
+
+.example-option-img {
+  vertical-align: middle;
+}
diff --git a/src/material-examples/autocomplete-overview/autocomplete-overview-example.html b/src/material-examples/autocomplete-overview/autocomplete-overview-example.html
index 9b6179e74bc5..09ab07facdd3 100644
--- a/src/material-examples/autocomplete-overview/autocomplete-overview-example.html
+++ b/src/material-examples/autocomplete-overview/autocomplete-overview-example.html
@@ -3,14 +3,14 @@
     <input matInput placeholder="State" aria-label="State" [matAutocomplete]="auto" [formControl]="stateCtrl">
     <mat-autocomplete #auto="matAutocomplete">
       <mat-option *ngFor="let state of filteredStates | async" [value]="state.name">
-        <img style="vertical-align:middle;" aria-hidden src="{{state.flag}}" height="25" />
-        <span>{{ state.name }}</span> |
+        <img class="example-option-img" aria-hidden [src]="state.flag" height="25">
+        <span>{{state.name}}</span> |
         <small>Population: {{state.population}}</small>
       </mat-option>
     </mat-autocomplete>
   </mat-form-field>
 
-  <br />
+  <br>
 
   <mat-slide-toggle
     [checked]="stateCtrl.disabled"
diff --git a/src/material-examples/autocomplete-overview/autocomplete-overview-example.ts b/src/material-examples/autocomplete-overview/autocomplete-overview-example.ts
index 26f8faa2f41e..a3219203a090 100644
--- a/src/material-examples/autocomplete-overview/autocomplete-overview-example.ts
+++ b/src/material-examples/autocomplete-overview/autocomplete-overview-example.ts
@@ -1,11 +1,12 @@
 import {Component} from '@angular/core';
 import {FormControl} from '@angular/forms';
-
 import {Observable} from 'rxjs';
 import {map, startWith} from 'rxjs/operators';
 
-export class State {
-  constructor(public name: string, public population: string, public flag: string) { }
+export interface State {
+  flag: string;
+  name: string;
+  population: string;
 }
 
 /**
@@ -14,11 +15,11 @@ export class State {
 @Component({
   selector: 'autocomplete-overview-example',
   templateUrl: 'autocomplete-overview-example.html',
-  styleUrls: ['autocomplete-overview-example.css']
+  styleUrls: ['autocomplete-overview-example.css'],
 })
 export class AutocompleteOverviewExample {
-  stateCtrl: FormControl;
-  filteredStates: Observable<any[]>;
+  stateCtrl = new FormControl();
+  filteredStates: Observable<State[]>;
 
   states: State[] = [
     {
@@ -48,17 +49,16 @@ export class AutocompleteOverviewExample {
   ];
 
   constructor() {
-    this.stateCtrl = new FormControl();
     this.filteredStates = this.stateCtrl.valueChanges
       .pipe(
         startWith(''),
-        map(state => state ? this.filterStates(state) : this.states.slice())
+        map(state => state ? this._filterStates(state) : this.states.slice())
       );
   }
 
-  filterStates(name: string) {
-    return this.states.filter(state =>
-      state.name.toLowerCase().indexOf(name.toLowerCase()) === 0);
-  }
+  private _filterStates(value: string): State[] {
+    const filterValue = value.toLowerCase();
 
+    return this.states.filter(state => state.name.toLowerCase().indexOf(filterValue) === 0);
+  }
 }
diff --git a/src/material-examples/autocomplete-simple/autocomplete-simple-example.html b/src/material-examples/autocomplete-simple/autocomplete-simple-example.html
index 57a309431f85..cfd6bdf223e8 100644
--- a/src/material-examples/autocomplete-simple/autocomplete-simple-example.html
+++ b/src/material-examples/autocomplete-simple/autocomplete-simple-example.html
@@ -3,7 +3,7 @@
     <input type="text" placeholder="Pick one" aria-label="Number" matInput [formControl]="myControl" [matAutocomplete]="auto">
     <mat-autocomplete #auto="matAutocomplete">
       <mat-option *ngFor="let option of options" [value]="option">
-        {{ option }}
+        {{option}}
       </mat-option>
     </mat-autocomplete>
   </mat-form-field>
diff --git a/src/material-examples/autocomplete-simple/autocomplete-simple-example.ts b/src/material-examples/autocomplete-simple/autocomplete-simple-example.ts
index c3f1bcb6dfd0..94c673db9dc6 100644
--- a/src/material-examples/autocomplete-simple/autocomplete-simple-example.ts
+++ b/src/material-examples/autocomplete-simple/autocomplete-simple-example.ts
@@ -7,16 +7,9 @@ import {FormControl} from '@angular/forms';
 @Component({
   selector: 'autocomplete-simple-example',
   templateUrl: 'autocomplete-simple-example.html',
-  styleUrls: ['autocomplete-simple-example.css']
+  styleUrls: ['autocomplete-simple-example.css'],
 })
 export class AutocompleteSimpleExample {
-
-  myControl: FormControl = new FormControl();
-
-  options = [
-    'One',
-    'Two',
-    'Three'
-   ];
-
+  myControl = new FormControl();
+  options: string[] = ['One', 'Two', 'Three'];
 }
diff --git a/src/material-examples/badge-overview/badge-overview-example.ts b/src/material-examples/badge-overview/badge-overview-example.ts
index 30ba295e290f..ff0a597bd90f 100644
--- a/src/material-examples/badge-overview/badge-overview-example.ts
+++ b/src/material-examples/badge-overview/badge-overview-example.ts
@@ -1,12 +1,11 @@
 import {Component} from '@angular/core';
 
-
 /**
  * @title Badge overview
  */
 @Component({
   selector: 'badge-overview-example',
   templateUrl: 'badge-overview-example.html',
-  styleUrls: ['badge-overview-example.css']
+  styleUrls: ['badge-overview-example.css'],
 })
-export class BadgeOverviewExample { }
+export class BadgeOverviewExample {}
diff --git a/src/material-examples/cdk-table-basic-flex/cdk-table-basic-flex-example.ts b/src/material-examples/cdk-table-basic-flex/cdk-table-basic-flex-example.ts
index b117d4dee4e9..6e255f9a1d35 100644
--- a/src/material-examples/cdk-table-basic-flex/cdk-table-basic-flex-example.ts
+++ b/src/material-examples/cdk-table-basic-flex/cdk-table-basic-flex-example.ts
@@ -2,24 +2,11 @@ import {DataSource} from '@angular/cdk/collections';
 import {Component} from '@angular/core';
 import {BehaviorSubject, Observable} from 'rxjs';
 
-/**
- * @title Basic use of `<cdk-table>` (uses display flex)
- */
-@Component({
-  selector: 'cdk-table-basic-flex-example',
-  styleUrls: ['cdk-table-basic-flex-example.css'],
-  templateUrl: 'cdk-table-basic-flex-example.html',
-})
-export class CdkTableBasicFlexExample {
-  displayedColumns = ['position', 'name', 'weight', 'symbol'];
-  dataSource = new ExampleDataSource();
-}
-
 export interface PeriodicElement {
   name: string;
   position: number;
-  weight: number;
   symbol: string;
+  weight: number;
 }
 
 const ELEMENT_DATA: PeriodicElement[] = [
@@ -35,6 +22,19 @@ const ELEMENT_DATA: PeriodicElement[] = [
   {position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne'},
 ];
 
+/**
+ * @title Basic use of `<cdk-table>` (uses display flex)
+ */
+@Component({
+  selector: 'cdk-table-basic-flex-example',
+  styleUrls: ['cdk-table-basic-flex-example.css'],
+  templateUrl: 'cdk-table-basic-flex-example.html',
+})
+export class CdkTableBasicFlexExample {
+  displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
+  dataSource = new ExampleDataSource();
+}
+
 /**
  * Data source to provide what data should be rendered in the table. Note that the data source
  * can retrieve its data in any way. In this case, the data source is provided a reference
@@ -44,7 +44,7 @@ const ELEMENT_DATA: PeriodicElement[] = [
  */
 export class ExampleDataSource extends DataSource<PeriodicElement> {
   /** Stream of data that is provided to the table. */
-  data: BehaviorSubject<PeriodicElement[]> = new BehaviorSubject<PeriodicElement[]>(ELEMENT_DATA);
+  data = new BehaviorSubject<PeriodicElement[]>(ELEMENT_DATA);
 
   /** Connect function called by the table to retrieve one stream containing the data to render. */
   connect(): Observable<PeriodicElement[]> {
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 57ca60603a9a..c1f06e45f483 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,19 +2,6 @@ import {DataSource} from '@angular/cdk/collections';
 import {Component} from '@angular/core';
 import {BehaviorSubject, Observable} from 'rxjs';
 
-/**
- * @title Basic CDK data-table
- */
-@Component({
-  selector: 'cdk-table-basic-example',
-  styleUrls: ['cdk-table-basic-example.css'],
-  templateUrl: 'cdk-table-basic-example.html',
-})
-export class CdkTableBasicExample {
-  displayedColumns = ['position', 'name', 'weight', 'symbol'];
-  dataSource = new ExampleDataSource();
-}
-
 export interface PeriodicElement {
   name: string;
   position: number;
@@ -35,6 +22,19 @@ const ELEMENT_DATA: PeriodicElement[] = [
   {position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne'},
 ];
 
+/**
+ * @title Basic CDK data-table
+ */
+@Component({
+  selector: 'cdk-table-basic-example',
+  styleUrls: ['cdk-table-basic-example.css'],
+  templateUrl: 'cdk-table-basic-example.html',
+})
+export class CdkTableBasicExample {
+  displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
+  dataSource = new ExampleDataSource();
+}
+
 /**
  * Data source to provide what data should be rendered in the table. Note that the data source
  * can retrieve its data in any way. In this case, the data source is provided a reference
@@ -44,7 +44,7 @@ const ELEMENT_DATA: PeriodicElement[] = [
  */
 export class ExampleDataSource extends DataSource<PeriodicElement> {
   /** Stream of data that is provided to the table. */
-  data: BehaviorSubject<PeriodicElement[]> = new BehaviorSubject<PeriodicElement[]>(ELEMENT_DATA);
+  data = new BehaviorSubject<PeriodicElement[]>(ELEMENT_DATA);
 
   /** Connect function called by the table to retrieve one stream containing the data to render. */
   connect(): Observable<PeriodicElement[]> {
diff --git a/src/material-examples/cdk-tree-flat/cdk-tree-flat-example.css b/src/material-examples/cdk-tree-flat/cdk-tree-flat-example.css
index 775f480239de..a88255f0d954 100644
--- a/src/material-examples/cdk-tree-flat/cdk-tree-flat-example.css
+++ b/src/material-examples/cdk-tree-flat/cdk-tree-flat-example.css
@@ -1,4 +1,4 @@
-.demo-tree-node {
+.example-tree-node {
   display: flex;
   align-items: center;
 }
diff --git a/src/material-examples/cdk-tree-flat/cdk-tree-flat-example.html b/src/material-examples/cdk-tree-flat/cdk-tree-flat-example.html
index f6389208babf..1ad370959384 100644
--- a/src/material-examples/cdk-tree-flat/cdk-tree-flat-example.html
+++ b/src/material-examples/cdk-tree-flat/cdk-tree-flat-example.html
@@ -1,9 +1,9 @@
 <cdk-tree [dataSource]="dataSource" [treeControl]="treeControl">
-  <cdk-tree-node *cdkTreeNodeDef="let node" cdkTreeNodePadding class="demo-tree-node">
+  <cdk-tree-node *cdkTreeNodeDef="let node" cdkTreeNodePadding class="example-tree-node">
     <button mat-icon-button disabled></button>
     {{node.filename}}:  {{node.type}}
   </cdk-tree-node>
-  <cdk-tree-node *cdkTreeNodeDef="let node; when: hasChild" cdkTreeNodePadding class="demo-tree-node">
+  <cdk-tree-node *cdkTreeNodeDef="let node; when: hasChild" cdkTreeNodePadding class="example-tree-node">
     <button mat-icon-button [attr.aria-label]="'toggle ' + node.filename" cdkTreeNodeToggle>
       <mat-icon class="mat-icon-rtl-mirror">
         {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
diff --git a/src/material-examples/cdk-tree-flat/cdk-tree-flat-example.ts b/src/material-examples/cdk-tree-flat/cdk-tree-flat-example.ts
index ebfaad125f18..9f9487126ff4 100644
--- a/src/material-examples/cdk-tree-flat/cdk-tree-flat-example.ts
+++ b/src/material-examples/cdk-tree-flat/cdk-tree-flat-example.ts
@@ -15,51 +15,48 @@ export class FileNode {
 
 /** Flat node with expandable and level information */
 export class FileFlatNode {
-  filename: string;
-  type: any;
-  level: number;
-  expandable: boolean;
+  constructor(
+    public expandable: boolean, public filename: string, public level: number, public type: any) {}
 }
 
 /**
  * The file structure tree data in string. The data could be parsed into a Json object
  */
-const TREE_DATA = `
-  {
-    "Documents": {
-      "angular": {
-        "src": {
-          "core": "ts",
-          "compiler": "ts"
-        }
-      },
-      "material2": {
-        "src": {
-          "button": "ts",
-          "checkbox": "ts",
-          "input": "ts"
-        }
+const TREE_DATA = JSON.stringify({
+  Applications: {
+    Calendar: 'app',
+    Chrome: 'app',
+    Webstorm: 'app'
+  },
+  Documents: {
+    angular: {
+      src: {
+        compiler: 'ts',
+        core: 'ts'
       }
     },
-    "Downloads": {
-        "Tutorial": "html",
-        "November": "pdf",
-        "October": "pdf"
-    },
-    "Pictures": {
-        "Sun": "png",
-        "Woods": "jpg",
-        "Photo Booth Library": {
-          "Contents": "dir",
-          "Pictures": "dir"
-        }
-    },
-    "Applications": {
-        "Chrome": "app",
-        "Calendar": "app",
-        "Webstorm": "app"
+    material2: {
+      src: {
+        button: 'ts',
+        checkbox: 'ts',
+        input: 'ts'
+      }
     }
-}`;
+  },
+  Downloads: {
+    October: 'pdf',
+    November: 'pdf',
+    Tutorial: 'html'
+  },
+  Pictures: {
+    'Photo Booth Library': {
+      Contents: 'dir',
+      Pictures: 'dir'
+    },
+    Sun: 'png',
+    Woods: 'jpg'
+  }
+});
 
 /**
  * File database, it can build a tree structured Json object from string.
@@ -70,7 +67,7 @@ const TREE_DATA = `
  */
 @Injectable()
 export class FileDatabase {
-  dataChange: BehaviorSubject<FileNode[]> = new BehaviorSubject<FileNode[]>([]);
+  dataChange = new BehaviorSubject<FileNode[]>([]);
 
   get data(): FileNode[] { return this.dataChange.value; }
 
@@ -94,22 +91,22 @@ export class FileDatabase {
    * Build the file structure tree. The `value` is the Json object, or a sub-tree of a Json object.
    * The return value is the list of `FileNode`.
    */
-  buildFileTree(value: any, level: number): FileNode[] {
-    let data: any[] = [];
-    for (let k in value) {
-      let v = value[k];
-      let node = new FileNode();
-      node.filename = `${k}`;
-      if (v === null || v === undefined) {
-        // no action
-      } else if (typeof v === 'object') {
-        node.children = this.buildFileTree(v, level + 1);
-      } else {
-        node.type = v;
+  buildFileTree(obj: object, level: number): FileNode[] {
+    return Object.keys(obj).reduce<FileNode[]>((accumulator, key) => {
+      const value = obj[key];
+      const node = new FileNode();
+      node.filename = key;
+
+      if (value != null) {
+        if (typeof value === 'object') {
+          node.children = this.buildFileTree(value, level + 1);
+        } else {
+          node.type = value;
+        }
       }
-      data.push(node);
-    }
-    return data;
+
+      return accumulator.concat(node);
+    }, []);
   }
 }
 
@@ -123,11 +120,8 @@ export class FileDatabase {
   providers: [FileDatabase]
 })
 export class CdkTreeFlatExample {
-
   treeControl: FlatTreeControl<FileFlatNode>;
-
   treeFlattener: MatTreeFlattener<FileNode, FileFlatNode>;
-
   dataSource: MatTreeFlatDataSource<FileNode, FileFlatNode>;
 
   constructor(database: FileDatabase) {
@@ -141,22 +135,15 @@ export class CdkTreeFlatExample {
     });
   }
 
+  hasChild = (_: number, _nodeData: FileFlatNode) => _nodeData.expandable;
+
   transformer = (node: FileNode, level: number) => {
-    let flatNode = new FileFlatNode();
-    flatNode.filename = node.filename;
-    flatNode.type = node.type;
-    flatNode.level = level;
-    flatNode.expandable = !!node.children;
-    return flatNode;
+    return new FileFlatNode(!!node.children, node.filename, level, node.type);
   }
 
-  private _getLevel = (node: FileFlatNode) => { return node.level; };
+  private _getLevel = (node: FileFlatNode) => node.level;
 
-  private _isExpandable = (node: FileFlatNode) => { return node.expandable; };
-
-  private _getChildren = (node: FileNode): Observable<FileNode[]> => {
-    return observableOf(node.children);
-  }
+  private _isExpandable = (node: FileFlatNode) => node.expandable;
 
-  hasChild = (_: number, _nodeData: FileFlatNode) => { return _nodeData.expandable; };
+  private _getChildren = (node: FileNode): Observable<FileNode[]> => observableOf(node.children);
 }
diff --git a/src/material-examples/cdk-tree-nested/cdk-tree-nested-example.ts b/src/material-examples/cdk-tree-nested/cdk-tree-nested-example.ts
index cca891b3c186..3809879c66cc 100644
--- a/src/material-examples/cdk-tree-nested/cdk-tree-nested-example.ts
+++ b/src/material-examples/cdk-tree-nested/cdk-tree-nested-example.ts
@@ -15,42 +15,41 @@ export class FileNode {
 /**
  * The Json tree data in string. The data could be parsed into Json object
  */
-const TREE_DATA = `
-  {
-    "Documents": {
-      "angular": {
-        "src": {
-          "core": "ts",
-          "compiler": "ts"
-        }
-      },
-      "material2": {
-        "src": {
-          "button": "ts",
-          "checkbox": "ts",
-          "input": "ts"
-        }
+const TREE_DATA = JSON.stringify({
+  Applications: {
+    Calendar: 'app',
+    Chrome: 'app',
+    Webstorm: 'app'
+  },
+  Documents: {
+    angular: {
+      src: {
+        compiler: 'ts',
+        core: 'ts'
       }
     },
-    "Downloads": {
-        "Tutorial": "html",
-        "November": "pdf",
-        "October": "pdf"
-    },
-    "Pictures": {
-        "Sun": "png",
-        "Woods": "jpg",
-        "Photo Booth Library": {
-          "Contents": "dir",
-          "Pictures": "dir"
-        }
-    },
-    "Applications": {
-        "Chrome": "app",
-        "Calendar": "app",
-        "Webstorm": "app"
+    material2: {
+      src: {
+        button: 'ts',
+        checkbox: 'ts',
+        input: 'ts'
+      }
     }
-  }`;
+  },
+  Downloads: {
+    October: 'pdf',
+    November: 'pdf',
+    Tutorial: 'html'
+  },
+  Pictures: {
+    'Photo Booth Library': {
+      Contents: 'dir',
+      Pictures: 'dir'
+    },
+    Sun: 'png',
+    Woods: 'jpg'
+  }
+});
 
 /**
  * File database, it can build a tree structured Json object from string.
@@ -61,7 +60,7 @@ const TREE_DATA = `
  */
 @Injectable()
 export class FileDatabase {
-  dataChange: BehaviorSubject<FileNode[]> = new BehaviorSubject<FileNode[]>([]);
+  dataChange = new BehaviorSubject<FileNode[]>([]);
 
   get data(): FileNode[] { return this.dataChange.value; }
 
@@ -85,22 +84,22 @@ export class FileDatabase {
    * Build the file structure tree. The `value` is the Json object, or a sub-tree of a Json object.
    * The return value is the list of `FileNode`.
    */
-  buildFileTree(value: any, level: number): FileNode[] {
-    let data: any[] = [];
-    for (let k in value) {
-      let v = value[k];
-      let node = new FileNode();
-      node.filename = `${k}`;
-      if (v === null || v === undefined) {
-        // no action
-      } else if (typeof v === 'object') {
-        node.children = this.buildFileTree(v, level + 1);
-      } else {
-        node.type = v;
+  buildFileTree(obj: object, level: number): FileNode[] {
+    return Object.keys(obj).reduce<FileNode[]>((accumulator, key) => {
+      const value = obj[key];
+      const node = new FileNode();
+      node.filename = key;
+
+      if (value != null) {
+        if (typeof value === 'object') {
+          node.children = this.buildFileTree(value, level + 1);
+        } else {
+          node.type = value;
+        }
       }
-      data.push(node);
-    }
-    return data;
+
+      return accumulator.concat(node);
+    }, []);
   }
 }
 
@@ -115,7 +114,6 @@ export class FileDatabase {
 })
 export class CdkTreeNestedExample {
   nestedTreeControl: NestedTreeControl<FileNode>;
-
   nestedDataSource: MatTreeNestedDataSource<FileNode>;
 
   constructor(database: FileDatabase) {
@@ -125,7 +123,7 @@ export class CdkTreeNestedExample {
     database.dataChange.subscribe(data => this.nestedDataSource.data = data);
   }
 
-  private _getChildren = (node: FileNode) => { return observableOf(node.children); };
+  hasNestedChild = (_: number, nodeData: FileNode) => !nodeData.type;
 
-  hasNestedChild = (_: number, nodeData: FileNode) => {return !(nodeData.type); };
+  private _getChildren = (node: FileNode) => observableOf(node.children);
 }
diff --git a/src/material-examples/chips-autocomplete/chips-autocomplete-example.css b/src/material-examples/chips-autocomplete/chips-autocomplete-example.css
index 505a4c661c34..fecda9cd0705 100644
--- a/src/material-examples/chips-autocomplete/chips-autocomplete-example.css
+++ b/src/material-examples/chips-autocomplete/chips-autocomplete-example.css
@@ -1,3 +1,3 @@
-.demo-chip-list {
+.example-chip-list {
   width: 100%;
 }
diff --git a/src/material-examples/chips-autocomplete/chips-autocomplete-example.html b/src/material-examples/chips-autocomplete/chips-autocomplete-example.html
index 1099c6ca73b4..9477edb35223 100644
--- a/src/material-examples/chips-autocomplete/chips-autocomplete-example.html
+++ b/src/material-examples/chips-autocomplete/chips-autocomplete-example.html
@@ -1,4 +1,4 @@
-<mat-form-field class="demo-chip-list">
+<mat-form-field class="example-chip-list">
   <mat-chip-list #chipList>
     <mat-chip
       *ngFor="let fruit of fruits"
@@ -16,12 +16,11 @@
       [matChipInputFor]="chipList"
       [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
       [matChipInputAddOnBlur]="addOnBlur"
-      (matChipInputTokenEnd)="add($event)"
-    />
+      (matChipInputTokenEnd)="add($event)">
   </mat-chip-list>
   <mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)">
     <mat-option *ngFor="let fruit of filteredFruits | async" [value]="fruit">
-      {{ fruit }}
+      {{fruit}}
     </mat-option>
   </mat-autocomplete>
 </mat-form-field>
diff --git a/src/material-examples/chips-autocomplete/chips-autocomplete-example.ts b/src/material-examples/chips-autocomplete/chips-autocomplete-example.ts
index 20c5f49e5233..2c3a3c0e1381 100644
--- a/src/material-examples/chips-autocomplete/chips-autocomplete-example.ts
+++ b/src/material-examples/chips-autocomplete/chips-autocomplete-example.ts
@@ -11,38 +11,25 @@ import {map, startWith} from 'rxjs/operators';
 @Component({
   selector: 'chips-autocomplete-example',
   templateUrl: 'chips-autocomplete-example.html',
-  styleUrls: ['chips-autocomplete-example.css']
+  styleUrls: ['chips-autocomplete-example.css'],
 })
 export class ChipsAutocompleteExample {
-  visible: boolean = true;
-  selectable: boolean = true;
-  removable: boolean = true;
-  addOnBlur: boolean = false;
-
-  separatorKeysCodes = [ENTER, COMMA];
-
+  visible = true;
+  selectable = true;
+  removable = true;
+  addOnBlur = false;
+  separatorKeysCodes: number[] = [ENTER, COMMA];
   fruitCtrl = new FormControl();
-
-  filteredFruits: Observable<any[]>;
-
-  fruits = [
-    'Lemon',
-  ];
-
-  allFruits = [
-    'Apple',
-    'Lemon',
-    'Lime',
-    'Orange',
-    'Strawberry'
-  ];
+  filteredFruits: Observable<string[]>;
+  fruits: string[] = ['Lemon'];
+  allFruits: string[] = ['Apple', 'Lemon', 'Lime', 'Orange', 'Strawberry'];
 
   @ViewChild('fruitInput') fruitInput: ElementRef;
 
   constructor() {
     this.filteredFruits = this.fruitCtrl.valueChanges.pipe(
         startWith(null),
-        map((fruit: string | null) => fruit ? this.filter(fruit) : this.allFruits.slice()));
+        map((fruit: string | null) => fruit ? this._filter(fruit) : this.allFruits.slice()));
   }
 
   add(event: MatChipInputEvent): void {
@@ -62,7 +49,7 @@ export class ChipsAutocompleteExample {
     this.fruitCtrl.setValue(null);
   }
 
-  remove(fruit: any): void {
+  remove(fruit: string): void {
     const index = this.fruits.indexOf(fruit);
 
     if (index >= 0) {
@@ -70,14 +57,15 @@ export class ChipsAutocompleteExample {
     }
   }
 
-  filter(name: string) {
-    return this.allFruits.filter(fruit =>
-        fruit.toLowerCase().indexOf(name.toLowerCase()) === 0);
-  }
-
   selected(event: MatAutocompleteSelectedEvent): void {
     this.fruits.push(event.option.viewValue);
     this.fruitInput.nativeElement.value = '';
     this.fruitCtrl.setValue(null);
   }
+
+  private _filter(value: string): string[] {
+    const filterValue = value.toLowerCase();
+
+    return this.allFruits.filter(fruit => fruit.toLowerCase().indexOf(filterValue) === 0);
+  }
 }
diff --git a/src/material-examples/chips-input/chips-input-example.css b/src/material-examples/chips-input/chips-input-example.css
index 505a4c661c34..fecda9cd0705 100644
--- a/src/material-examples/chips-input/chips-input-example.css
+++ b/src/material-examples/chips-input/chips-input-example.css
@@ -1,3 +1,3 @@
-.demo-chip-list {
+.example-chip-list {
   width: 100%;
 }
diff --git a/src/material-examples/chips-input/chips-input-example.html b/src/material-examples/chips-input/chips-input-example.html
index 3ae37accbb15..af72c31730e6 100644
--- a/src/material-examples/chips-input/chips-input-example.html
+++ b/src/material-examples/chips-input/chips-input-example.html
@@ -1,4 +1,4 @@
-<mat-form-field class="demo-chip-list">
+<mat-form-field class="example-chip-list">
   <mat-chip-list #chipList>
     <mat-chip *ngFor="let fruit of fruits" [selectable]="selectable"
              [removable]="removable" (removed)="remove(fruit)">
@@ -9,6 +9,6 @@
            [matChipInputFor]="chipList"
            [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
            [matChipInputAddOnBlur]="addOnBlur"
-           (matChipInputTokenEnd)="add($event)" />
+           (matChipInputTokenEnd)="add($event)">
   </mat-chip-list>
 </mat-form-field>
diff --git a/src/material-examples/chips-input/chips-input-example.ts b/src/material-examples/chips-input/chips-input-example.ts
index e90a5e6e1daf..d086ef53c989 100644
--- a/src/material-examples/chips-input/chips-input-example.ts
+++ b/src/material-examples/chips-input/chips-input-example.ts
@@ -1,6 +1,10 @@
+import {COMMA, ENTER} from '@angular/cdk/keycodes';
 import {Component} from '@angular/core';
 import {MatChipInputEvent} from '@angular/material';
-import {ENTER, COMMA} from '@angular/cdk/keycodes';
+
+export interface Fruit {
+  name: string;
+}
 
 /**
  * @title Chips with input
@@ -8,31 +12,27 @@ import {ENTER, COMMA} from '@angular/cdk/keycodes';
 @Component({
   selector: 'chips-input-example',
   templateUrl: 'chips-input-example.html',
-  styleUrls: ['chips-input-example.css']
+  styleUrls: ['chips-input-example.css'],
 })
 export class ChipsInputExample {
-  visible: boolean = true;
-  selectable: boolean = true;
-  removable: boolean = true;
-  addOnBlur: boolean = true;
-
-  // Enter, comma
-  separatorKeysCodes = [ENTER, COMMA];
-
-  fruits = [
-    { name: 'Lemon' },
-    { name: 'Lime' },
-    { name: 'Apple' },
+  visible = true;
+  selectable = true;
+  removable = true;
+  addOnBlur = true;
+  separatorKeysCodes: number[] = [ENTER, COMMA];
+  fruits: Fruit[] = [
+    {name: 'Lemon'},
+    {name: 'Lime'},
+    {name: 'Apple'},
   ];
 
-
   add(event: MatChipInputEvent): void {
-    let input = event.input;
-    let value = event.value;
+    const input = event.input;
+    const value = event.value;
 
     // Add our fruit
     if ((value || '').trim()) {
-      this.fruits.push({ name: value.trim() });
+      this.fruits.push({name: value.trim()});
     }
 
     // Reset the input value
@@ -41,8 +41,8 @@ export class ChipsInputExample {
     }
   }
 
-  remove(fruit: any): void {
-    let index = this.fruits.indexOf(fruit);
+  remove(fruit: Fruit): void {
+    const index = this.fruits.indexOf(fruit);
 
     if (index >= 0) {
       this.fruits.splice(index, 1);
diff --git a/src/material-examples/chips-overview/chips-overview-example.html b/src/material-examples/chips-overview/chips-overview-example.html
index 3228bc87b2d3..8ca14537a0ca 100644
--- a/src/material-examples/chips-overview/chips-overview-example.html
+++ b/src/material-examples/chips-overview/chips-overview-example.html
@@ -1,6 +1,6 @@
 <mat-chip-list>
   <mat-chip>One fish</mat-chip>
   <mat-chip>Two fish</mat-chip>
-  <mat-chip color="primary" selected="true">Primary fish</mat-chip>
-  <mat-chip color="accent" selected="true">Accent fish</mat-chip>
+  <mat-chip color="primary" selected>Primary fish</mat-chip>
+  <mat-chip color="accent" selected>Accent fish</mat-chip>
 </mat-chip-list>
diff --git a/src/material-examples/chips-stacked/chips-stacked-example.html b/src/material-examples/chips-stacked/chips-stacked-example.html
index e4c7613dec87..1c6832f67972 100644
--- a/src/material-examples/chips-stacked/chips-stacked-example.html
+++ b/src/material-examples/chips-stacked/chips-stacked-example.html
@@ -1,5 +1,5 @@
 <mat-chip-list class="mat-chip-list-stacked">
-  <mat-chip *ngFor="let chip of availableColors" selected="true" [color]="chip.color">
+  <mat-chip *ngFor="let chip of availableColors" selected [color]="chip.color">
     {{chip.name}}
   </mat-chip>
 </mat-chip-list>
diff --git a/src/material-examples/chips-stacked/chips-stacked-example.ts b/src/material-examples/chips-stacked/chips-stacked-example.ts
index 816c226494b9..35c4073b4f78 100644
--- a/src/material-examples/chips-stacked/chips-stacked-example.ts
+++ b/src/material-examples/chips-stacked/chips-stacked-example.ts
@@ -1,4 +1,10 @@
 import {Component} from '@angular/core';
+import {ThemePalette} from '@angular/material/core';
+
+export interface ChipColor {
+  name: string;
+  color: ThemePalette;
+}
 
 /**
  * @title Stacked chips
@@ -9,12 +15,10 @@ import {Component} from '@angular/core';
   styleUrls: ['chips-stacked-example.css'],
 })
 export class ChipsStackedExample {
-  color: string;
-
-  availableColors = [
-    { name: 'none', color: '' },
-    { name: 'Primary', color: 'primary' },
-    { name: 'Accent', color: 'accent' },
-    { name: 'Warn', color: 'warn' }
+  availableColors: ChipColor[] = [
+    {name: 'none', color: undefined},
+    {name: 'Primary', color: 'primary'},
+    {name: 'Accent', color: 'accent'},
+    {name: 'Warn', color: 'warn'}
   ];
 }
diff --git a/src/material-examples/datepicker-custom-header/datepicker-custom-header-example.ts b/src/material-examples/datepicker-custom-header/datepicker-custom-header-example.ts
index 4ae0dd54bf65..ec5497637233 100644
--- a/src/material-examples/datepicker-custom-header/datepicker-custom-header-example.ts
+++ b/src/material-examples/datepicker-custom-header/datepicker-custom-header-example.ts
@@ -4,8 +4,7 @@ import {
   Component,
   Host,
   Inject,
-  OnDestroy,
-  ViewEncapsulation
+  OnDestroy
 } from '@angular/core';
 import {MatCalendar} from '@angular/material';
 import {DateAdapter, MAT_DATE_FORMATS, MatDateFormats} from '@angular/material/core';
@@ -17,7 +16,6 @@ import {takeUntil} from 'rxjs/operators';
   selector: 'datepicker-custom-header-example',
   templateUrl: 'datepicker-custom-header-example.html',
   styleUrls: ['datepicker-custom-header-example.css'],
-  encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DatepickerCustomHeaderExample {
@@ -46,7 +44,6 @@ export class DatepickerCustomHeaderExample {
       </button>
     </div>
   `,
-  encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ExampleHeader<D> implements OnDestroy {
@@ -73,13 +70,13 @@ export class ExampleHeader<D> implements OnDestroy {
   }
 
   previousClicked(mode: 'month' | 'year') {
-    this.calendar.activeDate = mode == 'month' ?
+    this.calendar.activeDate = mode === 'month' ?
         this.dateAdapter.addCalendarMonths(this.calendar.activeDate, -1) :
         this.dateAdapter.addCalendarYears(this.calendar.activeDate, -1);
   }
 
   nextClicked(mode: 'month' | 'year') {
-    this.calendar.activeDate = mode == 'month' ?
+    this.calendar.activeDate = mode === 'month' ?
         this.dateAdapter.addCalendarMonths(this.calendar.activeDate, 1) :
         this.dateAdapter.addCalendarYears(this.calendar.activeDate, 1);
   }
diff --git a/src/material-examples/datepicker-touch/datepicker-touch-example.html b/src/material-examples/datepicker-touch/datepicker-touch-example.html
index 7cec1f8e330a..70a7e61e264b 100644
--- a/src/material-examples/datepicker-touch/datepicker-touch-example.html
+++ b/src/material-examples/datepicker-touch/datepicker-touch-example.html
@@ -1,5 +1,5 @@
 <mat-form-field class="example-full-width">
   <input matInput [matDatepicker]="picker" placeholder="Choose a date">
   <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
-  <mat-datepicker touchUi="true" #picker></mat-datepicker>
+  <mat-datepicker touchUi #picker></mat-datepicker>
 </mat-form-field>
diff --git a/src/material-examples/datepicker-views-selection/datepicker-views-selection-example.ts b/src/material-examples/datepicker-views-selection/datepicker-views-selection-example.ts
index 6a2336673422..d37580087ec7 100644
--- a/src/material-examples/datepicker-views-selection/datepicker-views-selection-example.ts
+++ b/src/material-examples/datepicker-views-selection/datepicker-views-selection-example.ts
@@ -1,4 +1,4 @@
-import {Component, ViewEncapsulation} from '@angular/core';
+import {Component} from '@angular/core';
 import {FormControl} from '@angular/forms';
 import {MomentDateAdapter} from '@angular/material-moment-adapter';
 import {DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE} from '@angular/material/core';
@@ -33,7 +33,6 @@ export const MY_FORMATS = {
   selector: 'datepicker-views-selection-example',
   templateUrl: 'datepicker-views-selection-example.html',
   styleUrls: ['datepicker-views-selection-example.css'],
-  encapsulation: ViewEncapsulation.None,
   providers: [
     // `MomentDateAdapter` can be automatically provided by importing `MomentDateModule` in your
     // application's root module. We provide it at the component level here, due to limitations of
diff --git a/src/material-examples/dialog-data/dialog-data-example.ts b/src/material-examples/dialog-data/dialog-data-example.ts
index 9f47c92d7cbd..e1499f164796 100644
--- a/src/material-examples/dialog-data/dialog-data-example.ts
+++ b/src/material-examples/dialog-data/dialog-data-example.ts
@@ -1,13 +1,17 @@
 import {Component, Inject} from '@angular/core';
 import {MatDialog, MAT_DIALOG_DATA} from '@angular/material';
 
+export interface DialogData {
+  animal: 'panda' | 'unicorn' | 'lion';
+}
+
 /**
  * @title Injecting data when opening a dialog
  */
 @Component({
   selector: 'dialog-data-example',
   templateUrl: 'dialog-data-example.html',
-  styleUrls: ['dialog-data-example.css']
+  styleUrls: ['dialog-data-example.css'],
 })
 export class DialogDataExample {
   constructor(public dialog: MatDialog) {}
@@ -26,5 +30,5 @@ export class DialogDataExample {
   templateUrl: 'dialog-data-example-dialog.html',
 })
 export class DialogDataExampleDialog {
-  constructor(@Inject(MAT_DIALOG_DATA) public data: any) {}
+  constructor(@Inject(MAT_DIALOG_DATA) public data: DialogData) {}
 }
diff --git a/src/material-examples/dialog-elements/dialog-elements-example.ts b/src/material-examples/dialog-elements/dialog-elements-example.ts
index b279523d54de..29183b2584fa 100644
--- a/src/material-examples/dialog-elements/dialog-elements-example.ts
+++ b/src/material-examples/dialog-elements/dialog-elements-example.ts
@@ -10,7 +10,7 @@ import {MatDialog} from '@angular/material';
   styleUrls: ['dialog-elements-example.css'],
 })
 export class DialogElementsExample {
-  constructor(public dialog: MatDialog) { }
+  constructor(public dialog: MatDialog) {}
 
   openDialog() {
     this.dialog.open(DialogElementsExampleDialog);
@@ -22,4 +22,4 @@ export class DialogElementsExample {
   selector: 'dialog-elements-example-dialog',
   templateUrl: 'dialog-elements-example-dialog.html',
 })
-export class DialogElementsExampleDialog { }
+export class DialogElementsExampleDialog {}
diff --git a/src/material-examples/dialog-overview/dialog-overview-example.ts b/src/material-examples/dialog-overview/dialog-overview-example.ts
index b8d172633da4..29c60705fab3 100644
--- a/src/material-examples/dialog-overview/dialog-overview-example.ts
+++ b/src/material-examples/dialog-overview/dialog-overview-example.ts
@@ -1,6 +1,11 @@
 import {Component, Inject} from '@angular/core';
 import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material';
 
+export interface DialogData {
+  animal: string;
+  name: string;
+}
+
 /**
  * @title Dialog Overview
  */
@@ -17,9 +22,9 @@ export class DialogOverviewExample {
   constructor(public dialog: MatDialog) {}
 
   openDialog(): void {
-    let dialogRef = this.dialog.open(DialogOverviewExampleDialog, {
+    const dialogRef = this.dialog.open(DialogOverviewExampleDialog, {
       width: '250px',
-      data: { name: this.name, animal: this.animal }
+      data: {name: this.name, animal: this.animal}
     });
 
     dialogRef.afterClosed().subscribe(result => {
@@ -38,7 +43,7 @@ export class DialogOverviewExampleDialog {
 
   constructor(
     public dialogRef: MatDialogRef<DialogOverviewExampleDialog>,
-    @Inject(MAT_DIALOG_DATA) public data: any) { }
+    @Inject(MAT_DIALOG_DATA) public data: DialogData) {}
 
   onNoClick(): void {
     this.dialogRef.close();
diff --git a/src/material-examples/expansion-expand-collapse-all/expansion-expand-collapse-all-example.html b/src/material-examples/expansion-expand-collapse-all/expansion-expand-collapse-all-example.html
index 497675ccd94f..0231b80d874f 100644
--- a/src/material-examples/expansion-expand-collapse-all/expansion-expand-collapse-all-example.html
+++ b/src/material-examples/expansion-expand-collapse-all/expansion-expand-collapse-all-example.html
@@ -1,60 +1,59 @@
 <div class="example-action-buttons">
-    <button mat-button (click)="accordion.openAll()">Expand All</button>
-    <button mat-button (click)="accordion.closeAll()">Collapse All</button>
+  <button mat-button (click)="accordion.openAll()">Expand All</button>
+  <button mat-button (click)="accordion.closeAll()">Collapse All</button>
 </div>
-<mat-accordion class="example-headers-align" [multi]="true">
-    <mat-expansion-panel>
-        <mat-expansion-panel-header>
-            <mat-panel-title>
-                Personal data
-            </mat-panel-title>
-            <mat-panel-description>
-                Type your name and age
-                <mat-icon>account_circle</mat-icon>
-            </mat-panel-description>
-        </mat-expansion-panel-header>
-
-        <mat-form-field>
-            <input matInput placeholder="First name">
-        </mat-form-field>
-
-        <mat-form-field>
-            <input matInput type="number" min="1" placeholder="Age">
-        </mat-form-field>
-
-    </mat-expansion-panel>
-
-    <mat-expansion-panel [disabled]="true">
-        <mat-expansion-panel-header>
-            <mat-panel-title>
-                Destination
-            </mat-panel-title>
-            <mat-panel-description>
-                Type the country name
-                <mat-icon>map</mat-icon>
-            </mat-panel-description>
-        </mat-expansion-panel-header>
-
-        <mat-form-field>
-            <input matInput placeholder="Country">
-        </mat-form-field>
-    </mat-expansion-panel>
-
-    <mat-expansion-panel>
-        <mat-expansion-panel-header>
-            <mat-panel-title>
-                Day of the trip
-            </mat-panel-title>
-            <mat-panel-description>
-                Inform the date you wish to travel
-                <mat-icon>date_range</mat-icon>
-            </mat-panel-description>
-        </mat-expansion-panel-header>
-
-        <mat-form-field>
-            <input matInput placeholder="Date" [matDatepicker]="picker" (focus)="picker.open()" readonly>
-        </mat-form-field>
-        <mat-datepicker #picker></mat-datepicker>
-    </mat-expansion-panel>
-
+<mat-accordion class="example-headers-align" multi>
+  <mat-expansion-panel>
+    <mat-expansion-panel-header>
+      <mat-panel-title>
+        Personal data
+      </mat-panel-title>
+      <mat-panel-description>
+        Type your name and age
+        <mat-icon>account_circle</mat-icon>
+      </mat-panel-description>
+    </mat-expansion-panel-header>
+
+    <mat-form-field>
+      <input matInput placeholder="First name">
+    </mat-form-field>
+
+    <mat-form-field>
+      <input matInput type="number" min="1" placeholder="Age">
+    </mat-form-field>
+
+  </mat-expansion-panel>
+
+  <mat-expansion-panel disabled>
+    <mat-expansion-panel-header>
+      <mat-panel-title>
+        Destination
+      </mat-panel-title>
+      <mat-panel-description>
+        Type the country name
+        <mat-icon>map</mat-icon>
+      </mat-panel-description>
+    </mat-expansion-panel-header>
+
+    <mat-form-field>
+      <input matInput placeholder="Country">
+    </mat-form-field>
+  </mat-expansion-panel>
+
+  <mat-expansion-panel>
+    <mat-expansion-panel-header>
+      <mat-panel-title>
+        Day of the trip
+      </mat-panel-title>
+      <mat-panel-description>
+        Inform the date you wish to travel
+        <mat-icon>date_range</mat-icon>
+      </mat-panel-description>
+    </mat-expansion-panel-header>
+
+    <mat-form-field>
+      <input matInput placeholder="Date" [matDatepicker]="picker" (focus)="picker.open()" readonly>
+    </mat-form-field>
+    <mat-datepicker #picker></mat-datepicker>
+  </mat-expansion-panel>
 </mat-accordion>
diff --git a/src/material-examples/expansion-expand-collapse-all/expansion-expand-collapse-all-example.ts b/src/material-examples/expansion-expand-collapse-all/expansion-expand-collapse-all-example.ts
index 580430b52c08..eb628ccefcad 100644
--- a/src/material-examples/expansion-expand-collapse-all/expansion-expand-collapse-all-example.ts
+++ b/src/material-examples/expansion-expand-collapse-all/expansion-expand-collapse-all-example.ts
@@ -7,7 +7,7 @@ import {MatAccordion} from '@angular/material';
 @Component({
   selector: 'expansion-toggle-all-example',
   templateUrl: 'expansion-expand-collapse-all-example.html',
-  styleUrls: ['expansion-expand-collapse-all-example.css']
+  styleUrls: ['expansion-expand-collapse-all-example.css'],
 })
 export class ExpansionExpandCollapseAllExample {
   @ViewChild(MatAccordion) accordion: MatAccordion;
diff --git a/src/material-examples/expansion-overview/expansion-overview-example.ts b/src/material-examples/expansion-overview/expansion-overview-example.ts
index 30eb44b3aefb..280dde345445 100644
--- a/src/material-examples/expansion-overview/expansion-overview-example.ts
+++ b/src/material-examples/expansion-overview/expansion-overview-example.ts
@@ -9,5 +9,5 @@ import {Component} from '@angular/core';
   styleUrls: ['expansion-overview-example.css'],
 })
 export class ExpansionOverviewExample {
-  panelOpenState: boolean = false;
+  panelOpenState = false;
 }
diff --git a/src/material-examples/expansion-steps/expansion-steps-example.html b/src/material-examples/expansion-steps/expansion-steps-example.html
index 1a4880c2cdc8..c76cdf88fe91 100644
--- a/src/material-examples/expansion-steps/expansion-steps-example.html
+++ b/src/material-examples/expansion-steps/expansion-steps-example.html
@@ -1,5 +1,5 @@
 <mat-accordion class="example-headers-align">
-  <mat-expansion-panel [expanded]="step === 0" (opened)="setStep(0)" hideToggle="true">
+  <mat-expansion-panel [expanded]="step === 0" (opened)="setStep(0)" hideToggle>
     <mat-expansion-panel-header>
       <mat-panel-title>
         Personal data
@@ -23,7 +23,7 @@
     </mat-action-row>
   </mat-expansion-panel>
 
-  <mat-expansion-panel [expanded]="step === 1" (opened)="setStep(1)" hideToggle="true">
+  <mat-expansion-panel [expanded]="step === 1" (opened)="setStep(1)" hideToggle>
     <mat-expansion-panel-header>
       <mat-panel-title>
         Destination
@@ -44,7 +44,7 @@
     </mat-action-row>
   </mat-expansion-panel>
 
-  <mat-expansion-panel [expanded]="step === 2" (opened)="setStep(2)" hideToggle="true">
+  <mat-expansion-panel [expanded]="step === 2" (opened)="setStep(2)" hideToggle>
     <mat-expansion-panel-header>
       <mat-panel-title>
         Day of the trip
diff --git a/src/material-examples/expansion-steps/expansion-steps-example.ts b/src/material-examples/expansion-steps/expansion-steps-example.ts
index e302175fa2a3..5dfa1d28e382 100644
--- a/src/material-examples/expansion-steps/expansion-steps-example.ts
+++ b/src/material-examples/expansion-steps/expansion-steps-example.ts
@@ -6,7 +6,7 @@ import {Component} from '@angular/core';
 @Component({
   selector: 'expansion-steps-example',
   templateUrl: 'expansion-steps-example.html',
-  styleUrls: ['expansion-steps-example.css']
+  styleUrls: ['expansion-steps-example.css'],
 })
 export class ExpansionStepsExample {
   step = 0;
diff --git a/src/material-examples/focus-monitor-directives/focus-monitor-directives-example.ts b/src/material-examples/focus-monitor-directives/focus-monitor-directives-example.ts
index c13412a97cf6..35ce0309f18f 100644
--- a/src/material-examples/focus-monitor-directives/focus-monitor-directives-example.ts
+++ b/src/material-examples/focus-monitor-directives/focus-monitor-directives-example.ts
@@ -8,8 +8,8 @@ import {ChangeDetectorRef, Component, NgZone} from '@angular/core';
   styleUrls: ['focus-monitor-directives-example.css']
 })
 export class FocusMonitorDirectivesExample {
-  elementOrigin: string = this.formatOrigin(null);
-  subtreeOrigin: string = this.formatOrigin(null);
+  elementOrigin = this.formatOrigin(null);
+  subtreeOrigin = this.formatOrigin(null);
 
   constructor(private ngZone: NgZone, private cdr: ChangeDetectorRef) {}
 
diff --git a/src/material-examples/focus-monitor-focus-via/focus-monitor-focus-via-example.ts b/src/material-examples/focus-monitor-focus-via/focus-monitor-focus-via-example.ts
index 6ad5dd511770..78c520045b08 100644
--- a/src/material-examples/focus-monitor-focus-via/focus-monitor-focus-via-example.ts
+++ b/src/material-examples/focus-monitor-focus-via/focus-monitor-focus-via-example.ts
@@ -18,7 +18,7 @@ import {
 export class FocusMonitorFocusViaExample implements OnDestroy, OnInit {
   @ViewChild('monitored') monitoredEl: ElementRef;
 
-  origin: string = this.formatOrigin(null);
+  origin = this.formatOrigin(null);
 
   constructor(public focusMonitor: FocusMonitor,
               private cdr: ChangeDetectorRef,
diff --git a/src/material-examples/focus-monitor-overview/focus-monitor-overview-example.ts b/src/material-examples/focus-monitor-overview/focus-monitor-overview-example.ts
index 4f0e8475f64a..7e4abd64864c 100644
--- a/src/material-examples/focus-monitor-overview/focus-monitor-overview-example.ts
+++ b/src/material-examples/focus-monitor-overview/focus-monitor-overview-example.ts
@@ -19,8 +19,8 @@ export class FocusMonitorOverviewExample implements OnDestroy, OnInit {
   @ViewChild('element') element: ElementRef;
   @ViewChild('subtree') subtree: ElementRef;
 
-  elementOrigin: string = this.formatOrigin(null);
-  subtreeOrigin: string = this.formatOrigin(null);
+  elementOrigin = this.formatOrigin(null);
+  subtreeOrigin = this.formatOrigin(null);
 
   constructor(private focusMonitor: FocusMonitor,
               private cdr: ChangeDetectorRef,
diff --git a/src/material-examples/form-field-appearance/form-field-appearance-example.ts b/src/material-examples/form-field-appearance/form-field-appearance-example.ts
index 77f124fcd909..b2ed1ed3a869 100644
--- a/src/material-examples/form-field-appearance/form-field-appearance-example.ts
+++ b/src/material-examples/form-field-appearance/form-field-appearance-example.ts
@@ -4,6 +4,6 @@ import {Component} from '@angular/core';
 @Component({
   selector: 'form-field-appearance-example',
   templateUrl: 'form-field-appearance-example.html',
-  styleUrls: ['form-field-appearance-example.css']
+  styleUrls: ['form-field-appearance-example.css'],
 })
 export class FormFieldAppearanceExample {}
diff --git a/src/material-examples/form-field-custom-control/form-field-custom-control-example.ts b/src/material-examples/form-field-custom-control/form-field-custom-control-example.ts
index 70b57b0822a8..314611d7733a 100644
--- a/src/material-examples/form-field-custom-control/form-field-custom-control-example.ts
+++ b/src/material-examples/form-field-custom-control/form-field-custom-control-example.ts
@@ -5,7 +5,6 @@ import {FormBuilder, FormGroup} from '@angular/forms';
 import {MatFormFieldControl} from '@angular/material';
 import {Subject} from 'rxjs';
 
-
 /** Data structure for holding telephone number. */
 export class MyTel {
   constructor(public area: string, public exchange: string, public subscriber: string) {}
@@ -28,74 +27,68 @@ export class MyTelInput implements MatFormFieldControl<MyTel>, OnDestroy {
   static nextId = 0;
 
   parts: FormGroup;
-
   stateChanges = new Subject<void>();
-
   focused = false;
-
   ngControl = null;
-
   errorState = false;
-
   controlType = 'my-tel-input';
+  id = `my-tel-input-${MyTelInput.nextId++}`;
+  describedBy = '';
 
   get empty() {
-    let n = this.parts.value;
-    return !n.area && !n.exchange && !n.subscriber;
+    const {value: {area, exchange, subscriber}} = this.parts;
+
+    return !area && !exchange && !subscriber;
   }
 
   get shouldLabelFloat() { return this.focused || !this.empty; }
 
-  id = `my-tel-input-${MyTelInput.nextId++}`;
-
-  describedBy = '';
-
   @Input()
-  get placeholder() { return this._placeholder; }
-  set placeholder(plh) {
-    this._placeholder = plh;
+  get placeholder(): string { return this._placeholder; }
+  set placeholder(value: string) {
+    this._placeholder = value;
     this.stateChanges.next();
   }
   private _placeholder: string;
 
   @Input()
-  get required() { return this._required; }
-  set required(req) {
-    this._required = coerceBooleanProperty(req);
+  get required(): boolean { return this._required; }
+  set required(value: boolean) {
+    this._required = coerceBooleanProperty(value);
     this.stateChanges.next();
   }
   private _required = false;
 
   @Input()
-  get disabled() { return this._disabled; }
-  set disabled(dis) {
-    this._disabled = coerceBooleanProperty(dis);
+  get disabled(): boolean { return this._disabled; }
+  set disabled(value: boolean) {
+    this._disabled = coerceBooleanProperty(value);
     this.stateChanges.next();
   }
   private _disabled = false;
 
   @Input()
   get value(): MyTel | null {
-    let n = this.parts.value;
-    if (n.area.length == 3 && n.exchange.length == 3 && n.subscriber.length == 4) {
-      return new MyTel(n.area, n.exchange, n.subscriber);
+    const {value: {area, exchange, subscriber}} = this.parts;
+    if (area.length === 3 && exchange.length === 3 && subscriber.length === 4) {
+      return new MyTel(area, exchange, subscriber);
     }
     return null;
   }
   set value(tel: MyTel | null) {
-    tel = tel || new MyTel('', '', '');
-    this.parts.setValue({area: tel.area, exchange: tel.exchange, subscriber: tel.subscriber});
+    const {area, exchange, subscriber} = tel || new MyTel('', '', '');
+    this.parts.setValue({area, exchange, subscriber});
     this.stateChanges.next();
   }
 
   constructor(fb: FormBuilder, private fm: FocusMonitor, private elRef: ElementRef) {
     this.parts = fb.group({
-      'area': '',
-      'exchange': '',
-      'subscriber': '',
+      area: '',
+      exchange: '',
+      subscriber: '',
     });
 
-    fm.monitor(elRef.nativeElement, true).subscribe((origin) => {
+    fm.monitor(elRef.nativeElement, true).subscribe(origin => {
       this.focused = !!origin;
       this.stateChanges.next();
     });
diff --git a/src/material-examples/form-field-error/form-field-error-example.ts b/src/material-examples/form-field-error/form-field-error-example.ts
index ac867e7157f0..042f95019e99 100644
--- a/src/material-examples/form-field-error/form-field-error-example.ts
+++ b/src/material-examples/form-field-error/form-field-error-example.ts
@@ -5,7 +5,7 @@ import {FormControl, Validators} from '@angular/forms';
 @Component({
   selector: 'form-field-error-example',
   templateUrl: 'form-field-error-example.html',
-  styleUrls: ['form-field-error-example.css']
+  styleUrls: ['form-field-error-example.css'],
 })
 export class FormFieldErrorExample {
   email = new FormControl('', [Validators.required, Validators.email]);
diff --git a/src/material-examples/form-field-hint/form-field-hint-example.ts b/src/material-examples/form-field-hint/form-field-hint-example.ts
index 1ae1b159368e..9bf6b602692e 100644
--- a/src/material-examples/form-field-hint/form-field-hint-example.ts
+++ b/src/material-examples/form-field-hint/form-field-hint-example.ts
@@ -4,6 +4,6 @@ import {Component} from '@angular/core';
 @Component({
   selector: 'form-field-hint-example',
   templateUrl: 'form-field-hint-example.html',
-  styleUrls: ['form-field-hint-example.css']
+  styleUrls: ['form-field-hint-example.css'],
 })
 export class FormFieldHintExample {}
diff --git a/src/material-examples/form-field-label/form-field-label-example.ts b/src/material-examples/form-field-label/form-field-label-example.ts
index 4ebb56e30908..ee03367d79bb 100644
--- a/src/material-examples/form-field-label/form-field-label-example.ts
+++ b/src/material-examples/form-field-label/form-field-label-example.ts
@@ -5,7 +5,7 @@ import {FormBuilder, FormGroup} from '@angular/forms';
 @Component({
   selector: 'form-field-label-example',
   templateUrl: 'form-field-label-example.html',
-  styleUrls: ['form-field-label-example.css']
+  styleUrls: ['form-field-label-example.css'],
 })
 export class FormFieldLabelExample {
   options: FormGroup;
diff --git a/src/material-examples/form-field-overview/form-field-overview-example.ts b/src/material-examples/form-field-overview/form-field-overview-example.ts
index 252002097827..4666e5add6bf 100644
--- a/src/material-examples/form-field-overview/form-field-overview-example.ts
+++ b/src/material-examples/form-field-overview/form-field-overview-example.ts
@@ -4,6 +4,6 @@ import {Component} from '@angular/core';
 @Component({
   selector: 'form-field-overview-example',
   templateUrl: 'form-field-overview-example.html',
-  styleUrls: ['form-field-overview-example.css']
+  styleUrls: ['form-field-overview-example.css'],
 })
 export class FormFieldOverviewExample {}
diff --git a/src/material-examples/form-field-prefix-suffix/form-field-prefix-suffix-example.ts b/src/material-examples/form-field-prefix-suffix/form-field-prefix-suffix-example.ts
index 16b24e7b45ec..43597b2e5aa1 100644
--- a/src/material-examples/form-field-prefix-suffix/form-field-prefix-suffix-example.ts
+++ b/src/material-examples/form-field-prefix-suffix/form-field-prefix-suffix-example.ts
@@ -4,7 +4,7 @@ import {Component} from '@angular/core';
 @Component({
   selector: 'form-field-prefix-suffix-example',
   templateUrl: 'form-field-prefix-suffix-example.html',
-  styleUrls: ['form-field-prefix-suffix-example.css']
+  styleUrls: ['form-field-prefix-suffix-example.css'],
 })
 export class FormFieldPrefixSuffixExample {
   hide = true;
diff --git a/src/material-examples/form-field-theming/form-field-theming-example.ts b/src/material-examples/form-field-theming/form-field-theming-example.ts
index 1e27dbc40b29..101e27f003d7 100644
--- a/src/material-examples/form-field-theming/form-field-theming-example.ts
+++ b/src/material-examples/form-field-theming/form-field-theming-example.ts
@@ -5,15 +5,15 @@ import {FormBuilder, FormGroup, Validators} from '@angular/forms';
 @Component({
   selector: 'form-field-theming-example',
   templateUrl: 'form-field-theming-example.html',
-  styleUrls: ['form-field-theming-example.css']
+  styleUrls: ['form-field-theming-example.css'],
 })
 export class FormFieldThemingExample {
   options: FormGroup;
 
   constructor(fb: FormBuilder) {
     this.options = fb.group({
-      'color': 'primary',
-      'fontSize': [16, Validators.min(10)],
+      color: 'primary',
+      fontSize: [16, Validators.min(10)],
     });
   }
 
diff --git a/src/material-examples/grid-list-dynamic/grid-list-dynamic-example.ts b/src/material-examples/grid-list-dynamic/grid-list-dynamic-example.ts
index 99b29dfe8a7d..e38d348d4a0c 100644
--- a/src/material-examples/grid-list-dynamic/grid-list-dynamic-example.ts
+++ b/src/material-examples/grid-list-dynamic/grid-list-dynamic-example.ts
@@ -1,5 +1,12 @@
 import {Component} from '@angular/core';
 
+export interface Tile {
+  color: string;
+  cols: number;
+  rows: number;
+  text: string;
+}
+
 /**
  * @title Dynamic grid-list
  */
@@ -9,7 +16,7 @@ import {Component} from '@angular/core';
   styleUrls: ['grid-list-dynamic-example.css'],
 })
 export class GridListDynamicExample {
-  tiles = [
+  tiles: Tile[] = [
     {text: 'One', cols: 3, rows: 1, color: 'lightblue'},
     {text: 'Two', cols: 1, rows: 2, color: 'lightgreen'},
     {text: 'Three', cols: 1, rows: 1, color: 'lightpink'},
diff --git a/src/material-examples/icon-overview/icon-overview-example.ts b/src/material-examples/icon-overview/icon-overview-example.ts
index c2106e33f9dc..f502ac6d3b11 100644
--- a/src/material-examples/icon-overview/icon-overview-example.ts
+++ b/src/material-examples/icon-overview/icon-overview-example.ts
@@ -6,6 +6,6 @@ import {Component} from '@angular/core';
 @Component({
   selector: 'icon-overview-example',
   templateUrl: 'icon-overview-example.html',
-  styleUrls: ['icon-overview-example.css']
+  styleUrls: ['icon-overview-example.css'],
 })
 export class IconOverviewExample {}
diff --git a/src/material-examples/input-clearable/input-clearable-example.html b/src/material-examples/input-clearable/input-clearable-example.html
index 4e1721a0f44d..4a135e1d60ff 100644
--- a/src/material-examples/input-clearable/input-clearable-example.html
+++ b/src/material-examples/input-clearable/input-clearable-example.html
@@ -1,5 +1,5 @@
 <mat-form-field class="example-form-field">
-  <input matInput type="text" placeholder="Clearable input" [(ngModel)]="value"/>
+  <input matInput type="text" placeholder="Clearable input" [(ngModel)]="value">
   <button mat-button *ngIf="value" matSuffix mat-icon-button aria-label="Clear" (click)="value=''">
     <mat-icon>close</mat-icon>
   </button>
diff --git a/src/material-examples/list-sections/list-sections-example.ts b/src/material-examples/list-sections/list-sections-example.ts
index 63e7e4c6142c..f7ae6621d339 100644
--- a/src/material-examples/list-sections/list-sections-example.ts
+++ b/src/material-examples/list-sections/list-sections-example.ts
@@ -1,5 +1,10 @@
 import {Component} from '@angular/core';
 
+export interface Section {
+  name: string;
+  updated: Date;
+}
+
 /**
  * @title List with sections
  */
@@ -9,7 +14,7 @@ import {Component} from '@angular/core';
   templateUrl: 'list-sections-example.html',
 })
 export class ListSectionsExample {
-  folders = [
+  folders: Section[] = [
     {
       name: 'Photos',
       updated: new Date('1/1/16'),
@@ -23,7 +28,7 @@ export class ListSectionsExample {
       updated: new Date('1/28/16'),
     }
   ];
-  notes = [
+  notes: Section[] = [
     {
       name: 'Vacation Itinerary',
       updated: new Date('2/20/16'),
diff --git a/src/material-examples/list-selection/list-selection-example.ts b/src/material-examples/list-selection/list-selection-example.ts
index 644d3d8a5707..322463fb5c83 100644
--- a/src/material-examples/list-selection/list-selection-example.ts
+++ b/src/material-examples/list-selection/list-selection-example.ts
@@ -9,5 +9,5 @@ import {Component} from '@angular/core';
   templateUrl: 'list-selection-example.html',
 })
 export class ListSelectionExample {
-  typesOfShoes = ['Boots', 'Clogs', 'Loafers', 'Moccasins', 'Sneakers'];
+  typesOfShoes: string[] = ['Boots', 'Clogs', 'Loafers', 'Moccasins', 'Sneakers'];
 }
diff --git a/src/material-examples/nested-menu/nested-menu-example.ts b/src/material-examples/nested-menu/nested-menu-example.ts
index d9d7b81eb316..4e4d9710b9d5 100644
--- a/src/material-examples/nested-menu/nested-menu-example.ts
+++ b/src/material-examples/nested-menu/nested-menu-example.ts
@@ -6,6 +6,6 @@ import {Component} from '@angular/core';
 @Component({
   selector: 'nested-menu-example',
   templateUrl: 'nested-menu-example.html',
-  styleUrls: ['nested-menu-example.css']
+  styleUrls: ['nested-menu-example.css'],
 })
 export class NestedMenuExample {}
diff --git a/src/material-examples/paginator-configurable/paginator-configurable-example.ts b/src/material-examples/paginator-configurable/paginator-configurable-example.ts
index 3a19e1385e03..10d102bbdd4a 100644
--- a/src/material-examples/paginator-configurable/paginator-configurable-example.ts
+++ b/src/material-examples/paginator-configurable/paginator-configurable-example.ts
@@ -13,7 +13,7 @@ export class PaginatorConfigurableExample {
   // MatPaginator Inputs
   length = 100;
   pageSize = 10;
-  pageSizeOptions = [5, 10, 25, 100];
+  pageSizeOptions: number[] = [5, 10, 25, 100];
 
   // MatPaginator Output
   pageEvent: PageEvent;
diff --git a/src/material-examples/progress-bar-configurable/progress-bar-configurable-example.html b/src/material-examples/progress-bar-configurable/progress-bar-configurable-example.html
index bdde8c6126a9..49c08020fde9 100644
--- a/src/material-examples/progress-bar-configurable/progress-bar-configurable-example.html
+++ b/src/material-examples/progress-bar-configurable/progress-bar-configurable-example.html
@@ -35,11 +35,11 @@ <h2 class="example-h2">Progress bar configuration</h2>
       </mat-radio-group>
     </section>
 
-    <section class="example-section" *ngIf="mode == 'determinate' || mode == 'buffer'">
+    <section class="example-section" *ngIf="mode === 'determinate' || mode === 'buffer'">
       <label class="example-margin">Progress:</label>
       <mat-slider class="example-margin" [(ngModel)]="value"></mat-slider>
     </section>
-    <section class="example-section" *ngIf="mode == 'buffer'">
+    <section class="example-section" *ngIf="mode === 'buffer'">
       <label class="example-margin">Buffer:</label>
       <mat-slider class="example-margin" [(ngModel)]="bufferValue"></mat-slider>
     </section>
diff --git a/src/material-examples/progress-spinner-configurable/progress-spinner-configurable-example.html b/src/material-examples/progress-spinner-configurable/progress-spinner-configurable-example.html
index 538321c81938..4ff79176cbca 100644
--- a/src/material-examples/progress-spinner-configurable/progress-spinner-configurable-example.html
+++ b/src/material-examples/progress-spinner-configurable/progress-spinner-configurable-example.html
@@ -29,7 +29,7 @@ <h2 class="example-h2">Progress spinner configuration</h2>
       </mat-radio-group>
     </section>
 
-    <section class="example-section" *ngIf="mode == 'determinate'">
+    <section class="example-section" *ngIf="mode === 'determinate'">
       <label class="example-margin">Progress:</label>
       <mat-slider class="example-margin" [(ngModel)]="value"></mat-slider>
     </section>
diff --git a/src/material-examples/radio-ng-model/radio-ng-model-example.ts b/src/material-examples/radio-ng-model/radio-ng-model-example.ts
index 52fc51572cf3..63791e23161b 100644
--- a/src/material-examples/radio-ng-model/radio-ng-model-example.ts
+++ b/src/material-examples/radio-ng-model/radio-ng-model-example.ts
@@ -10,11 +10,5 @@ import {Component} from '@angular/core';
 })
 export class RadioNgModelExample {
   favoriteSeason: string;
-
-  seasons = [
-    'Winter',
-    'Spring',
-    'Summer',
-    'Autumn',
-  ];
+  seasons: string[] = ['Winter', 'Spring', 'Summer', 'Autumn'];
 }
diff --git a/src/material-examples/select-custom-trigger/select-custom-trigger-example.ts b/src/material-examples/select-custom-trigger/select-custom-trigger-example.ts
index bc40ebd1bb98..0d38a010053f 100644
--- a/src/material-examples/select-custom-trigger/select-custom-trigger-example.ts
+++ b/src/material-examples/select-custom-trigger/select-custom-trigger-example.ts
@@ -10,5 +10,5 @@ import {FormControl} from '@angular/forms';
 export class SelectCustomTriggerExample {
   toppings = new FormControl();
 
-  toppingList = ['Extra cheese', 'Mushroom', 'Onion', 'Pepperoni', 'Sausage', 'Tomato'];
+  toppingList: string[] = ['Extra cheese', 'Mushroom', 'Onion', 'Pepperoni', 'Sausage', 'Tomato'];
 }
diff --git a/src/material-examples/select-form/select-form-example.ts b/src/material-examples/select-form/select-form-example.ts
index f3ad571314a1..aedf96732899 100644
--- a/src/material-examples/select-form/select-form-example.ts
+++ b/src/material-examples/select-form/select-form-example.ts
@@ -1,5 +1,10 @@
 import {Component} from '@angular/core';
 
+export interface Food {
+  value: string;
+  viewValue: string;
+}
+
 /**
  * @title Select in a form
  */
@@ -11,7 +16,7 @@ import {Component} from '@angular/core';
 export class SelectFormExample {
   selectedValue: string;
 
-  foods = [
+  foods: Food[] = [
     {value: 'steak-0', viewValue: 'Steak'},
     {value: 'pizza-1', viewValue: 'Pizza'},
     {value: 'tacos-2', viewValue: 'Tacos'}
diff --git a/src/material-examples/select-hint-error/select-hint-error-example.ts b/src/material-examples/select-hint-error/select-hint-error-example.ts
index 82fd4a193be9..f40d09b3d9fb 100644
--- a/src/material-examples/select-hint-error/select-hint-error-example.ts
+++ b/src/material-examples/select-hint-error/select-hint-error-example.ts
@@ -1,6 +1,11 @@
 import {Component} from '@angular/core';
 import {FormControl, Validators} from '@angular/forms';
 
+export interface Animal {
+  name: string;
+  sound: string;
+}
+
 /** @title Select with form field features */
 @Component({
   selector: 'select-hint-error-example',
@@ -9,8 +14,7 @@ import {FormControl, Validators} from '@angular/forms';
 })
 export class SelectHintErrorExample {
   animalControl = new FormControl('', [Validators.required]);
-
-  animals = [
+  animals: Animal[] = [
     {name: 'Dog', sound: 'Woof!'},
     {name: 'Cat', sound: 'Meow!'},
     {name: 'Cow', sound: 'Moo!'},
diff --git a/src/material-examples/select-multiple/select-multiple-example.ts b/src/material-examples/select-multiple/select-multiple-example.ts
index 7f58f4cbe78c..c9db8399eb43 100644
--- a/src/material-examples/select-multiple/select-multiple-example.ts
+++ b/src/material-examples/select-multiple/select-multiple-example.ts
@@ -9,6 +9,5 @@ import {FormControl} from '@angular/forms';
 })
 export class SelectMultipleExample {
   toppings = new FormControl();
-
-  toppingList = ['Extra cheese', 'Mushroom', 'Onion', 'Pepperoni', 'Sausage', 'Tomato'];
+  toppingList: string[] = ['Extra cheese', 'Mushroom', 'Onion', 'Pepperoni', 'Sausage', 'Tomato'];
 }
diff --git a/src/material-examples/select-optgroup/select-optgroup-example.html b/src/material-examples/select-optgroup/select-optgroup-example.html
index 24859472aa67..2467483619cb 100644
--- a/src/material-examples/select-optgroup/select-optgroup-example.html
+++ b/src/material-examples/select-optgroup/select-optgroup-example.html
@@ -4,7 +4,7 @@
     <mat-optgroup *ngFor="let group of pokemonGroups" [label]="group.name"
                   [disabled]="group.disabled">
       <mat-option *ngFor="let pokemon of group.pokemon" [value]="pokemon.value">
-        {{ pokemon.viewValue }}
+        {{pokemon.viewValue}}
       </mat-option>
     </mat-optgroup>
   </mat-select>
diff --git a/src/material-examples/select-optgroup/select-optgroup-example.ts b/src/material-examples/select-optgroup/select-optgroup-example.ts
index 6113c69b4d59..2624e8a5643e 100644
--- a/src/material-examples/select-optgroup/select-optgroup-example.ts
+++ b/src/material-examples/select-optgroup/select-optgroup-example.ts
@@ -1,6 +1,17 @@
 import {Component} from '@angular/core';
 import {FormControl} from '@angular/forms';
 
+export interface Pokemon {
+  value: string;
+  viewValue: string;
+}
+
+export interface PokemonGroup {
+  disabled?: boolean;
+  name: string;
+  pokemon: Pokemon[];
+}
+
 /** @title Select with option groups */
 @Component({
   selector: 'select-optgroup-example',
@@ -9,38 +20,37 @@ import {FormControl} from '@angular/forms';
 })
 export class SelectOptgroupExample {
   pokemonControl = new FormControl();
-
-  pokemonGroups = [
+  pokemonGroups: PokemonGroup[] = [
     {
       name: 'Grass',
       pokemon: [
-        { value: 'bulbasaur-0', viewValue: 'Bulbasaur' },
-        { value: 'oddish-1', viewValue: 'Oddish' },
-        { value: 'bellsprout-2', viewValue: 'Bellsprout' }
+        {value: 'bulbasaur-0', viewValue: 'Bulbasaur'},
+        {value: 'oddish-1', viewValue: 'Oddish'},
+        {value: 'bellsprout-2', viewValue: 'Bellsprout'}
       ]
     },
     {
       name: 'Water',
       pokemon: [
-        { value: 'squirtle-3', viewValue: 'Squirtle' },
-        { value: 'psyduck-4', viewValue: 'Psyduck' },
-        { value: 'horsea-5', viewValue: 'Horsea' }
+        {value: 'squirtle-3', viewValue: 'Squirtle'},
+        {value: 'psyduck-4', viewValue: 'Psyduck'},
+        {value: 'horsea-5', viewValue: 'Horsea'}
       ]
     },
     {
       name: 'Fire',
       disabled: true,
       pokemon: [
-        { value: 'charmander-6', viewValue: 'Charmander' },
-        { value: 'vulpix-7', viewValue: 'Vulpix' },
-        { value: 'flareon-8', viewValue: 'Flareon' }
+        {value: 'charmander-6', viewValue: 'Charmander'},
+        {value: 'vulpix-7', viewValue: 'Vulpix'},
+        {value: 'flareon-8', viewValue: 'Flareon'}
       ]
     },
     {
       name: 'Psychic',
       pokemon: [
-        { value: 'mew-9', viewValue: 'Mew' },
-        { value: 'mewtwo-10', viewValue: 'Mewtwo' },
+        {value: 'mew-9', viewValue: 'Mew'},
+        {value: 'mewtwo-10', viewValue: 'Mewtwo'},
       ]
     }
   ];
diff --git a/src/material-examples/select-overview/select-overview-example.html b/src/material-examples/select-overview/select-overview-example.html
index f02b07a123ad..954592675993 100644
--- a/src/material-examples/select-overview/select-overview-example.html
+++ b/src/material-examples/select-overview/select-overview-example.html
@@ -1,7 +1,7 @@
 <mat-form-field>
   <mat-select placeholder="Favorite food">
     <mat-option *ngFor="let food of foods" [value]="food.value">
-      {{ food.viewValue }}
+      {{food.viewValue}}
     </mat-option>
   </mat-select>
 </mat-form-field>
diff --git a/src/material-examples/select-overview/select-overview-example.ts b/src/material-examples/select-overview/select-overview-example.ts
index 8bae60ba829a..3f306bd1a44c 100644
--- a/src/material-examples/select-overview/select-overview-example.ts
+++ b/src/material-examples/select-overview/select-overview-example.ts
@@ -1,5 +1,10 @@
 import {Component} from '@angular/core';
 
+export interface Food {
+  value: string;
+  viewValue: string;
+}
+
 /**
  * @title Basic select
  */
@@ -9,7 +14,7 @@ import {Component} from '@angular/core';
   styleUrls: ['select-overview-example.css'],
 })
 export class SelectOverviewExample {
-  foods = [
+  foods: Food[] = [
     {value: 'steak-0', viewValue: 'Steak'},
     {value: 'pizza-1', viewValue: 'Pizza'},
     {value: 'tacos-2', viewValue: 'Tacos'}
diff --git a/src/material-examples/select-panel-class/select-panel-class-example.ts b/src/material-examples/select-panel-class/select-panel-class-example.ts
index 712f75f49b5f..eb848aa8fd97 100644
--- a/src/material-examples/select-panel-class/select-panel-class-example.ts
+++ b/src/material-examples/select-panel-class/select-panel-class-example.ts
@@ -1,4 +1,4 @@
-import {Component, ViewEncapsulation} from '@angular/core';
+import {Component} from '@angular/core';
 import {FormControl} from '@angular/forms';
 
 /**
@@ -8,7 +8,6 @@ import {FormControl} from '@angular/forms';
   selector: 'select-panel-class-example',
   templateUrl: 'select-panel-class-example.html',
   styleUrls: ['select-panel-class-example.css'],
-  encapsulation: ViewEncapsulation.None,
 })
 export class SelectPanelClassExample {
   panelColor = new FormControl('red');
diff --git a/src/material-examples/select-reset/select-reset-example.ts b/src/material-examples/select-reset/select-reset-example.ts
index e14587ed4567..a52b6e2ad758 100644
--- a/src/material-examples/select-reset/select-reset-example.ts
+++ b/src/material-examples/select-reset/select-reset-example.ts
@@ -7,7 +7,7 @@ import {Component} from '@angular/core';
   styleUrls: ['select-reset-example.css'],
 })
 export class SelectResetExample {
-  states = [
+  states: string[] = [
     'Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware',
     'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky',
     'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi',
diff --git a/src/material-examples/sidenav-drawer-overview/sidenav-drawer-overview-example.html b/src/material-examples/sidenav-drawer-overview/sidenav-drawer-overview-example.html
index 2dca0fd6723a..db557e1060ea 100644
--- a/src/material-examples/sidenav-drawer-overview/sidenav-drawer-overview-example.html
+++ b/src/material-examples/sidenav-drawer-overview/sidenav-drawer-overview-example.html
@@ -1,4 +1,4 @@
 <mat-drawer-container class="example-container">
-  <mat-drawer mode="side" opened="true">Drawer content</mat-drawer>
+  <mat-drawer mode="side" opened>Drawer content</mat-drawer>
   <mat-drawer-content>Main content</mat-drawer-content>
 </mat-drawer-container>
diff --git a/src/material-examples/sidenav-fixed/sidenav-fixed-example.html b/src/material-examples/sidenav-fixed/sidenav-fixed-example.html
index 53a74f824f86..dcc43afcd567 100644
--- a/src/material-examples/sidenav-fixed/sidenav-fixed-example.html
+++ b/src/material-examples/sidenav-fixed/sidenav-fixed-example.html
@@ -2,7 +2,7 @@
   <mat-toolbar class="example-header">Header</mat-toolbar>
 
   <mat-sidenav-container class="example-container">
-    <mat-sidenav #sidenav mode="side" opened="true" class="example-sidenav"
+    <mat-sidenav #sidenav mode="side" opened class="example-sidenav"
                  [fixedInViewport]="options.value.fixed" [fixedTopGap]="options.value.top"
                  [fixedBottomGap]="options.value.bottom">
       {{options.value.fixed ? 'Fixed' : 'Non-fixed'}} Sidenav
diff --git a/src/material-examples/sidenav-fixed/sidenav-fixed-example.ts b/src/material-examples/sidenav-fixed/sidenav-fixed-example.ts
index 910987f44e14..695b9b7b70ed 100644
--- a/src/material-examples/sidenav-fixed/sidenav-fixed-example.ts
+++ b/src/material-examples/sidenav-fixed/sidenav-fixed-example.ts
@@ -12,9 +12,9 @@ export class SidenavFixedExample {
 
   constructor(fb: FormBuilder) {
     this.options = fb.group({
-      'fixed': false,
-      'top': 0,
-      'bottom': 0,
+      bottom: 0,
+      fixed: false,
+      top: 0
     });
   }
 
diff --git a/src/material-examples/sidenav-mode/sidenav-mode-example.ts b/src/material-examples/sidenav-mode/sidenav-mode-example.ts
index 790ba5d2641c..b1b01f1c44d9 100644
--- a/src/material-examples/sidenav-mode/sidenav-mode-example.ts
+++ b/src/material-examples/sidenav-mode/sidenav-mode-example.ts
@@ -9,6 +9,5 @@ import {FormControl} from '@angular/forms';
 })
 export class SidenavModeExample {
   mode = new FormControl('over');
-
   shouldRun = [/(^|\.)plnkr\.co$/, /(^|\.)stackblitz\.io$/].some(h => h.test(window.location.host));
 }
diff --git a/src/material-examples/sidenav-responsive/sidenav-responsive-example.ts b/src/material-examples/sidenav-responsive/sidenav-responsive-example.ts
index 9e84e9a4b89d..da30404cb6b6 100644
--- a/src/material-examples/sidenav-responsive/sidenav-responsive-example.ts
+++ b/src/material-examples/sidenav-responsive/sidenav-responsive-example.ts
@@ -10,9 +10,9 @@ import {ChangeDetectorRef, Component, OnDestroy} from '@angular/core';
 export class SidenavResponsiveExample implements OnDestroy {
   mobileQuery: MediaQueryList;
 
-  fillerNav = Array(50).fill(0).map((_, i) => `Nav Item ${i + 1}`);
+  fillerNav = Array.from({length: 50}, (_, i) => `Nav Item ${i + 1}`);
 
-  fillerContent = Array(50).fill(0).map(() =>
+  fillerContent = Array.from({length: 50}, () =>
       `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
        labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
        laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
diff --git a/src/material-examples/slide-toggle-forms/slide-toggle-forms-example.html b/src/material-examples/slide-toggle-forms/slide-toggle-forms-example.html
index 3ce5f440b735..db205ffb3bca 100644
--- a/src/material-examples/slide-toggle-forms/slide-toggle-forms-example.html
+++ b/src/material-examples/slide-toggle-forms/slide-toggle-forms-example.html
@@ -1,10 +1,10 @@
 <p>Slide Toggle using a simple NgModel.</p>
 
-<mat-slide-toggle [(ngModel)]="isChecked">Slide Toggle Checked: {{ isChecked }}</mat-slide-toggle>
+<mat-slide-toggle [(ngModel)]="isChecked">Slide Toggle Checked: {{isChecked}}</mat-slide-toggle>
 
 <p>Slide Toggle inside of a Template-driven form</p>
 
-<form class="example-form" #form="ngForm" (ngSubmit)="onFormSubmit(form.value)" ngNativeValidate>
+<form class="example-form" #form="ngForm" (ngSubmit)="onFormSubmit()" ngNativeValidate>
 
   <mat-slide-toggle ngModel name="enableWifi">Enable Wifi</mat-slide-toggle>
   <mat-slide-toggle ngModel name="acceptTerms" required>Accept Terms of Service</mat-slide-toggle>
@@ -14,12 +14,12 @@
 
 <p>Slide Toggle inside of a Reactive form</p>
 
-<form class="example-form" [formGroup]="formGroup" (ngSubmit)="onFormSubmit(formGroup.value)" ngNativeValidate>
+<form class="example-form" [formGroup]="formGroup" (ngSubmit)="onFormSubmit()" ngNativeValidate>
 
   <mat-slide-toggle formControlName="enableWifi">Enable Wifi</mat-slide-toggle>
   <mat-slide-toggle formControlName="acceptTerms">Accept Terms of Service</mat-slide-toggle>
 
-  <p>Form Group Status: {{ formGroup.status}}</p>
+  <p>Form Group Status: {{formGroup.status}}</p>
 
   <button mat-rasied-button type="submit">Save Settings</button>
 </form>
diff --git a/src/material-examples/slide-toggle-forms/slide-toggle-forms-example.ts b/src/material-examples/slide-toggle-forms/slide-toggle-forms-example.ts
index 2636c474dd85..d511f1f5bfb6 100644
--- a/src/material-examples/slide-toggle-forms/slide-toggle-forms-example.ts
+++ b/src/material-examples/slide-toggle-forms/slide-toggle-forms-example.ts
@@ -20,7 +20,7 @@ export class SlideToggleFormsExample {
     });
   }
 
-  onFormSubmit(formValue: any) {
-    alert(JSON.stringify(formValue, null, 2));
+  onFormSubmit() {
+    alert(JSON.stringify(this.formGroup.value, null, 2));
   }
 }
diff --git a/src/material-examples/slider-configurable/slider-configurable-example.ts b/src/material-examples/slider-configurable/slider-configurable-example.ts
index 80f206709907..7b75621dfd74 100644
--- a/src/material-examples/slider-configurable/slider-configurable-example.ts
+++ b/src/material-examples/slider-configurable/slider-configurable-example.ts
@@ -1,4 +1,5 @@
-import {Component, ViewEncapsulation} from '@angular/core';
+import {coerceNumberProperty} from '@angular/cdk/coercion';
+import {Component} from '@angular/core';
 
 /**
  * @title Configurable slider
@@ -7,7 +8,6 @@ import {Component, ViewEncapsulation} from '@angular/core';
   selector: 'slider-configurable-example',
   templateUrl: 'slider-configurable-example.html',
   styleUrls: ['slider-configurable-example.css'],
-  encapsulation: ViewEncapsulation.None,
 })
 export class SliderConfigurableExample {
   autoTicks = false;
@@ -24,8 +24,8 @@ export class SliderConfigurableExample {
   get tickInterval(): number | 'auto' {
     return this.showTicks ? (this.autoTicks ? 'auto' : this._tickInterval) : 0;
   }
-  set tickInterval(v) {
-    this._tickInterval = Number(v);
+  set tickInterval(value) {
+    this._tickInterval = coerceNumberProperty(value);
   }
   private _tickInterval = 1;
 }
diff --git a/src/material-examples/snack-bar-component/snack-bar-component-example.ts b/src/material-examples/snack-bar-component/snack-bar-component-example.ts
index cf3fafdfdab0..bd121c3812c0 100644
--- a/src/material-examples/snack-bar-component/snack-bar-component-example.ts
+++ b/src/material-examples/snack-bar-component/snack-bar-component-example.ts
@@ -22,6 +22,10 @@ export class SnackBarComponentExample {
 @Component({
   selector: 'snack-bar-component-example-snack',
   templateUrl: 'snack-bar-component-example-snack.html',
-  styles: [`.example-pizza-party { color: hotpink; }`],
+  styles: [`
+    .example-pizza-party {
+      color: hotpink;
+    }
+  `],
 })
 export class PizzaPartyComponent {}
diff --git a/src/material-examples/sort-overview/sort-overview-example.ts b/src/material-examples/sort-overview/sort-overview-example.ts
index 58b19b393021..4062c8238f96 100644
--- a/src/material-examples/sort-overview/sort-overview-example.ts
+++ b/src/material-examples/sort-overview/sort-overview-example.ts
@@ -1,6 +1,14 @@
 import {Component} from '@angular/core';
 import {Sort} from '@angular/material';
 
+export interface Dessert {
+  calories: number;
+  carbs: number;
+  fat: number;
+  name: string;
+  protein: number;
+}
+
 /**
  * @title Sorting overview
  */
@@ -10,15 +18,15 @@ import {Sort} from '@angular/material';
   styleUrls: ['sort-overview-example.css'],
 })
 export class SortOverviewExample {
-  desserts = [
-    {name: 'Frozen yogurt', calories: '159', fat: '6', carbs: '24', protein: '4'},
-    {name: 'Ice cream sandwich', calories: '237', fat: '9', carbs: '37', protein: '4'},
-    {name: 'Eclair', calories: '262', fat: '16', carbs: '24', protein: '6'},
-    {name: 'Cupcake', calories: '305', fat: '4', carbs: '67', protein: '4'},
-    {name: 'Gingerbread', calories: '356', fat: '16', carbs: '49', protein: '4'},
+  desserts: Dessert[] = [
+    {name: 'Frozen yogurt', calories: 159, fat: 6, carbs: 24, protein: 4},
+    {name: 'Ice cream sandwich', calories: 237, fat: 9, carbs: 37, protein: 4},
+    {name: 'Eclair', calories: 262, fat: 16, carbs: 24, protein: 6},
+    {name: 'Cupcake', calories: 305, fat: 4, carbs: 67, protein: 4},
+    {name: 'Gingerbread', calories: 356, fat: 16, carbs: 49, protein: 4},
   ];
 
-  sortedData;
+  sortedData: Dessert[];
 
   constructor() {
     this.sortedData = this.desserts.slice();
@@ -26,19 +34,19 @@ export class SortOverviewExample {
 
   sortData(sort: Sort) {
     const data = this.desserts.slice();
-    if (!sort.active || sort.direction == '') {
+    if (!sort.active || sort.direction === '') {
       this.sortedData = data;
       return;
     }
 
     this.sortedData = data.sort((a, b) => {
-      let isAsc = sort.direction == 'asc';
+      const isAsc = sort.direction === 'asc';
       switch (sort.active) {
         case 'name': return compare(a.name, b.name, isAsc);
-        case 'calories': return compare(+a.calories, +b.calories, isAsc);
-        case 'fat': return compare(+a.fat, +b.fat, isAsc);
-        case 'carbs': return compare(+a.carbs, +b.carbs, isAsc);
-        case 'protein': return compare(+a.protein, +b.protein, isAsc);
+        case 'calories': return compare(a.calories, b.calories, isAsc);
+        case 'fat': return compare(a.fat, b.fat, isAsc);
+        case 'carbs': return compare(a.carbs, b.carbs, isAsc);
+        case 'protein': return compare(a.protein, b.protein, isAsc);
         default: return 0;
       }
     });
diff --git a/src/material-examples/stepper-editable/stepper-editable-example.html b/src/material-examples/stepper-editable/stepper-editable-example.html
index 05c22c5ac5d3..e9162fea4e04 100644
--- a/src/material-examples/stepper-editable/stepper-editable-example.html
+++ b/src/material-examples/stepper-editable/stepper-editable-example.html
@@ -2,7 +2,7 @@
   {{!isEditable ? 'Enable edit mode' : 'Disable edit mode'}}
 </button>
 
-<mat-horizontal-stepper [linear]="true" #stepper>
+<mat-horizontal-stepper linear #stepper>
   <mat-step [stepControl]="firstFormGroup" [editable]="isEditable">
     <form [formGroup]="firstFormGroup">
       <ng-template matStepLabel>Fill out your name</ng-template>
diff --git a/src/material-examples/stepper-editable/stepper-editable-example.ts b/src/material-examples/stepper-editable/stepper-editable-example.ts
index c70b275c351b..d052b27451eb 100644
--- a/src/material-examples/stepper-editable/stepper-editable-example.ts
+++ b/src/material-examples/stepper-editable/stepper-editable-example.ts
@@ -12,9 +12,9 @@ import {FormBuilder, FormGroup, Validators} from '@angular/forms';
 export class StepperEditableExample implements OnInit {
   firstFormGroup: FormGroup;
   secondFormGroup: FormGroup;
-  isEditable: boolean = false;
+  isEditable = false;
 
-  constructor(private _formBuilder: FormBuilder) { }
+  constructor(private _formBuilder: FormBuilder) {}
 
   ngOnInit() {
     this.firstFormGroup = this._formBuilder.group({
diff --git a/src/material-examples/stepper-optional/stepper-optional-example.html b/src/material-examples/stepper-optional/stepper-optional-example.html
index 004b3458d7c8..31c390bf4435 100644
--- a/src/material-examples/stepper-optional/stepper-optional-example.html
+++ b/src/material-examples/stepper-optional/stepper-optional-example.html
@@ -2,7 +2,7 @@
   {{!isOptional ? 'Enable optional steps' : 'Disable optional steps'}}
 </button>
 
-<mat-horizontal-stepper [linear]="true" #stepper>
+<mat-horizontal-stepper linear #stepper>
   <mat-step [stepControl]="firstFormGroup">
     <form [formGroup]="firstFormGroup">
       <ng-template matStepLabel>Fill out your name</ng-template>
diff --git a/src/material-examples/stepper-optional/stepper-optional-example.ts b/src/material-examples/stepper-optional/stepper-optional-example.ts
index 44935073dfa2..7096da95ed98 100644
--- a/src/material-examples/stepper-optional/stepper-optional-example.ts
+++ b/src/material-examples/stepper-optional/stepper-optional-example.ts
@@ -12,9 +12,9 @@ import {FormBuilder, FormGroup, Validators} from '@angular/forms';
 export class StepperOptionalExample implements OnInit {
   firstFormGroup: FormGroup;
   secondFormGroup: FormGroup;
-  isOptional: boolean = false;
+  isOptional = false;
 
-  constructor(private _formBuilder: FormBuilder) { }
+  constructor(private _formBuilder: FormBuilder) {}
 
   ngOnInit() {
     this.firstFormGroup = this._formBuilder.group({
diff --git a/src/material-examples/stepper-overview/stepper-overview-example.ts b/src/material-examples/stepper-overview/stepper-overview-example.ts
index cd2c18299cff..16690bbe818c 100644
--- a/src/material-examples/stepper-overview/stepper-overview-example.ts
+++ b/src/material-examples/stepper-overview/stepper-overview-example.ts
@@ -7,14 +7,14 @@ import {FormBuilder, FormGroup, Validators} from '@angular/forms';
 @Component({
   selector: 'stepper-overview-example',
   templateUrl: 'stepper-overview-example.html',
-  styleUrls: ['stepper-overview-example.css']
+  styleUrls: ['stepper-overview-example.css'],
 })
 export class StepperOverviewExample implements OnInit {
   isLinear = false;
   firstFormGroup: FormGroup;
   secondFormGroup: FormGroup;
 
-  constructor(private _formBuilder: FormBuilder) { }
+  constructor(private _formBuilder: FormBuilder) {}
 
   ngOnInit() {
     this.firstFormGroup = this._formBuilder.group({
diff --git a/src/material-examples/stepper-vertical/stepper-vertical-example.ts b/src/material-examples/stepper-vertical/stepper-vertical-example.ts
index 13229872f1fd..26bc7486d213 100644
--- a/src/material-examples/stepper-vertical/stepper-vertical-example.ts
+++ b/src/material-examples/stepper-vertical/stepper-vertical-example.ts
@@ -14,7 +14,7 @@ export class StepperVerticalExample implements OnInit {
   firstFormGroup: FormGroup;
   secondFormGroup: FormGroup;
 
-  constructor(private _formBuilder: FormBuilder) { }
+  constructor(private _formBuilder: FormBuilder) {}
 
   ngOnInit() {
     this.firstFormGroup = this._formBuilder.group({
diff --git a/src/material-examples/tab-nav-bar-basic/tab-nav-bar-basic-example.html b/src/material-examples/tab-nav-bar-basic/tab-nav-bar-basic-example.html
index 86d05003f3fb..538f335c1b8d 100644
--- a/src/material-examples/tab-nav-bar-basic/tab-nav-bar-basic-example.html
+++ b/src/material-examples/tab-nav-bar-basic/tab-nav-bar-basic-example.html
@@ -7,6 +7,6 @@
 <nav mat-tab-nav-bar [backgroundColor]="background">
   <a mat-tab-link *ngFor="let link of links"
      (click)="activeLink = link"
-     [active]="activeLink == link"> {{ link }} </a>
+     [active]="activeLink == link"> {{link}} </a>
   <a mat-tab-link disabled>Disabled Link</a>
 </nav>
diff --git a/src/material-examples/table-basic-flex/table-basic-flex-example.ts b/src/material-examples/table-basic-flex/table-basic-flex-example.ts
index f75072d0e74c..eb0066c4cf50 100644
--- a/src/material-examples/table-basic-flex/table-basic-flex-example.ts
+++ b/src/material-examples/table-basic-flex/table-basic-flex-example.ts
@@ -1,18 +1,5 @@
 import {Component} from '@angular/core';
 
-/**
- * @title Basic use of `<mat-table>` (uses display flex)
- */
-@Component({
-  selector: 'table-basic-flex-example',
-  styleUrls: ['table-basic-flex-example.css'],
-  templateUrl: 'table-basic-flex-example.html',
-})
-export class TableBasicFlexExample {
-  displayedColumns = ['position', 'name', 'weight', 'symbol'];
-  dataSource = ELEMENT_DATA;
-}
-
 export interface PeriodicElement {
   name: string;
   position: number;
@@ -32,3 +19,16 @@ const ELEMENT_DATA: PeriodicElement[] = [
   {position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F'},
   {position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne'},
 ];
+
+/**
+ * @title Basic use of `<mat-table>` (uses display flex)
+ */
+@Component({
+  selector: 'table-basic-flex-example',
+  styleUrls: ['table-basic-flex-example.css'],
+  templateUrl: 'table-basic-flex-example.html',
+})
+export class TableBasicFlexExample {
+  displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
+  dataSource = ELEMENT_DATA;
+}
diff --git a/src/material-examples/table-basic/table-basic-example.ts b/src/material-examples/table-basic/table-basic-example.ts
index 3042613e2d54..517218a256ea 100644
--- a/src/material-examples/table-basic/table-basic-example.ts
+++ b/src/material-examples/table-basic/table-basic-example.ts
@@ -1,18 +1,5 @@
 import {Component} from '@angular/core';
 
-/**
- * @title Basic use of `<table mat-table>`
- */
-@Component({
-  selector: 'table-basic-example',
-  styleUrls: ['table-basic-example.css'],
-  templateUrl: 'table-basic-example.html',
-})
-export class TableBasicExample {
-  displayedColumns = ['position', 'name', 'weight', 'symbol'];
-  dataSource = ELEMENT_DATA;
-}
-
 export interface PeriodicElement {
   name: string;
   position: number;
@@ -32,3 +19,16 @@ const ELEMENT_DATA: PeriodicElement[] = [
   {position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F'},
   {position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne'},
 ];
+
+/**
+ * @title Basic use of `<table mat-table>`
+ */
+@Component({
+  selector: 'table-basic-example',
+  styleUrls: ['table-basic-example.css'],
+  templateUrl: 'table-basic-example.html',
+})
+export class TableBasicExample {
+  displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
+  dataSource = ELEMENT_DATA;
+}
diff --git a/src/material-examples/table-dynamic-columns/table-dynamic-columns-example.html b/src/material-examples/table-dynamic-columns/table-dynamic-columns-example.html
index 0463410e5966..9d2fcac7ac34 100644
--- a/src/material-examples/table-dynamic-columns/table-dynamic-columns-example.html
+++ b/src/material-examples/table-dynamic-columns/table-dynamic-columns-example.html
@@ -3,7 +3,7 @@
 <button mat-raised-button (click)="shuffle()"> Shuffle </button>
 
 <table mat-table [dataSource]="data" class="mat-elevation-z8">
-  <ng-container matColumnDef="{{column}}" *ngFor="let column of definedColumns">
+  <ng-container [matColumnDef]="column" *ngFor="let column of displayedColumns">
     <th mat-header-cell *matHeaderCellDef> {{column}} </th>
     <td mat-cell *matCellDef="let element"> {{element[column]}} </td>
   </ng-container>
diff --git a/src/material-examples/table-dynamic-columns/table-dynamic-columns-example.ts b/src/material-examples/table-dynamic-columns/table-dynamic-columns-example.ts
index 107226fc60a6..4948c44ae4f3 100644
--- a/src/material-examples/table-dynamic-columns/table-dynamic-columns-example.ts
+++ b/src/material-examples/table-dynamic-columns/table-dynamic-columns-example.ts
@@ -1,5 +1,25 @@
 import {Component} from '@angular/core';
 
+export interface PeriodicElement {
+  name: string;
+  position: number;
+  weight: number;
+  symbol: string;
+}
+
+const ELEMENT_DATA: PeriodicElement[] = [
+  {position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
+  {position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
+  {position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
+  {position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be'},
+  {position: 5, name: 'Boron', weight: 10.811, symbol: 'B'},
+  {position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C'},
+  {position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N'},
+  {position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O'},
+  {position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F'},
+  {position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne'},
+];
+
 /**
  * @title Table dynamically changing the columns displayed
  */
@@ -9,13 +29,13 @@ import {Component} from '@angular/core';
   templateUrl: 'table-dynamic-columns-example.html',
 })
 export class TableDynamicColumnsExample {
-  definedColumns = ['name', 'weight', 'symbol', 'position'];
-  columnsToDisplay = this.definedColumns.slice();
+  displayedColumns: string[] = ['name', 'weight', 'symbol', 'position'];
+  columnsToDisplay: string[] = this.displayedColumns.slice();
   data: PeriodicElement[] = ELEMENT_DATA;
 
   addColumn() {
-    const randomColumn = Math.floor(Math.random() * this.definedColumns.length);
-    this.columnsToDisplay.push(this.definedColumns[randomColumn]);
+    const randomColumn = Math.floor(Math.random() * this.displayedColumns.length);
+    this.columnsToDisplay.push(this.displayedColumns[randomColumn]);
   }
 
   removeColumn() {
@@ -37,23 +57,3 @@ export class TableDynamicColumnsExample {
     }
   }
 }
-
-export interface PeriodicElement {
-  name: string;
-  position: number;
-  weight: number;
-  symbol: string;
-}
-
-const ELEMENT_DATA: PeriodicElement[] = [
-  {position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
-  {position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
-  {position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
-  {position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be'},
-  {position: 5, name: 'Boron', weight: 10.811, symbol: 'B'},
-  {position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C'},
-  {position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N'},
-  {position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O'},
-  {position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F'},
-  {position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne'},
-];
diff --git a/src/material-examples/table-filtering/table-filtering-example.ts b/src/material-examples/table-filtering/table-filtering-example.ts
index 4b4800b1afd9..e1b572b59d99 100644
--- a/src/material-examples/table-filtering/table-filtering-example.ts
+++ b/src/material-examples/table-filtering/table-filtering-example.ts
@@ -1,25 +1,6 @@
 import {Component} from '@angular/core';
 import {MatTableDataSource} from '@angular/material';
 
-/**
- * @title Table with filtering
- */
-@Component({
-  selector: 'table-filtering-example',
-  styleUrls: ['table-filtering-example.css'],
-  templateUrl: 'table-filtering-example.html',
-})
-export class TableFilteringExample {
-  displayedColumns = ['position', 'name', 'weight', 'symbol'];
-  dataSource = new MatTableDataSource(ELEMENT_DATA);
-
-  applyFilter(filterValue: string) {
-    filterValue = filterValue.trim(); // Remove whitespace
-    filterValue = filterValue.toLowerCase(); // MatTableDataSource defaults to lowercase matches
-    this.dataSource.filter = filterValue;
-  }
-}
-
 export interface PeriodicElement {
   name: string;
   position: number;
@@ -39,3 +20,20 @@ const ELEMENT_DATA: PeriodicElement[] = [
   {position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F'},
   {position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne'},
 ];
+
+/**
+ * @title Table with filtering
+ */
+@Component({
+  selector: 'table-filtering-example',
+  styleUrls: ['table-filtering-example.css'],
+  templateUrl: 'table-filtering-example.html',
+})
+export class TableFilteringExample {
+  displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
+  dataSource = new MatTableDataSource(ELEMENT_DATA);
+
+  applyFilter(filterValue: string) {
+    this.dataSource.filter = filterValue.trim().toLowerCase();
+  }
+}
diff --git a/src/material-examples/table-footer-row/table-footer-row-example.ts b/src/material-examples/table-footer-row/table-footer-row-example.ts
index c4df488b29cb..922273799d01 100644
--- a/src/material-examples/table-footer-row/table-footer-row-example.ts
+++ b/src/material-examples/table-footer-row/table-footer-row-example.ts
@@ -14,7 +14,7 @@ export interface Transaction {
   templateUrl: 'table-footer-row-example.html',
 })
 export class TableFooterRowExample {
-  displayedColumns = ['item', 'cost'];
+  displayedColumns: string[] = ['item', 'cost'];
   transactions: Transaction[] = [
     {item: 'Beach ball', cost: 4},
     {item: 'Towel', cost: 5},
diff --git a/src/material-examples/table-http/table-http-example.html b/src/material-examples/table-http/table-http-example.html
index 499928578d92..acdc824d5ddf 100644
--- a/src/material-examples/table-http/table-http-example.html
+++ b/src/material-examples/table-http/table-http-example.html
@@ -14,27 +14,27 @@
       <!-- Number Column -->
       <ng-container matColumnDef="number">
         <th mat-header-cell *matHeaderCellDef>#</th>
-        <td mat-cell *matCellDef="let row">{{ row.number }}</td>
+        <td mat-cell *matCellDef="let row">{{row.number}}</td>
       </ng-container>
 
       <!-- Title Column -->
       <ng-container matColumnDef="title">
         <th mat-header-cell *matHeaderCellDef>Title</th>
-        <td mat-cell *matCellDef="let row">{{ row.title }}</td>
+        <td mat-cell *matCellDef="let row">{{row.title}}</td>
       </ng-container>
 
       <!-- State Column -->
       <ng-container matColumnDef="state">
         <th mat-header-cell *matHeaderCellDef>State</th>
-        <td mat-cell *matCellDef="let row">{{ row.state }}</td>
+        <td mat-cell *matCellDef="let row">{{row.state}}</td>
       </ng-container>
 
       <!-- Created Column -->
       <ng-container matColumnDef="created">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear="true">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear>
           Created
         </th>
-        <td mat-cell *matCellDef="let row">{{ row.created_at | date }}</td>
+        <td mat-cell *matCellDef="let row">{{row.created_at | date}}</td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
diff --git a/src/material-examples/table-http/table-http-example.ts b/src/material-examples/table-http/table-http-example.ts
index 9475078b2446..aeab64373a45 100644
--- a/src/material-examples/table-http/table-http-example.ts
+++ b/src/material-examples/table-http/table-http-example.ts
@@ -13,7 +13,7 @@ import {catchError, map, startWith, switchMap} from 'rxjs/operators';
   templateUrl: 'table-http-example.html',
 })
 export class TableHttpExample implements OnInit {
-  displayedColumns = ['created', 'state', 'number', 'title'];
+  displayedColumns: string[] = ['created', 'state', 'number', 'title'];
   exampleDatabase: ExampleHttpDao | null;
   data: GithubIssue[] = [];
 
diff --git a/src/material-examples/table-multiple-header-footer/table-multiple-header-footer-example.ts b/src/material-examples/table-multiple-header-footer/table-multiple-header-footer-example.ts
index 1832eb4ba3fd..87c17befa8fe 100644
--- a/src/material-examples/table-multiple-header-footer/table-multiple-header-footer-example.ts
+++ b/src/material-examples/table-multiple-header-footer/table-multiple-header-footer-example.ts
@@ -15,7 +15,7 @@ export interface Transaction {
   templateUrl: 'table-multiple-header-footer-example.html',
 })
 export class TableMultipleHeaderFooterExample {
-  displayedColumns = ['item', 'cost'];
+  displayedColumns: string[] = ['item', 'cost'];
   transactions: Transaction[] = [
     {item: 'Beach ball', cost: 4},
     {item: 'Towel', cost: 5},
diff --git a/src/material-examples/table-overview/table-overview-example.ts b/src/material-examples/table-overview/table-overview-example.ts
index 9e58578ddf67..62eec1ce5564 100644
--- a/src/material-examples/table-overview/table-overview-example.ts
+++ b/src/material-examples/table-overview/table-overview-example.ts
@@ -1,6 +1,20 @@
 import {Component, OnInit, ViewChild} from '@angular/core';
 import {MatPaginator, MatSort, MatTableDataSource} from '@angular/material';
 
+export interface UserData {
+  id: string;
+  name: string;
+  progress: string;
+  color: string;
+}
+
+/** Constants used to fill up our data base. */
+const COLORS: string[] = ['maroon', 'red', 'orange', 'yellow', 'olive', 'green', 'purple',
+  'fuchsia', 'lime', 'teal', 'aqua', 'blue', 'navy', 'black', 'gray'];
+const NAMES: string[] = ['Maia', 'Asher', 'Olivia', 'Atticus', 'Amelia', 'Jack',
+  'Charlotte', 'Theodore', 'Isla', 'Oliver', 'Isabella', 'Jasper',
+  'Cora', 'Levi', 'Violet', 'Arthur', 'Mia', 'Thomas', 'Elizabeth'];
+
 /**
  * @title Data table with sorting, pagination, and filtering.
  */
@@ -10,7 +24,7 @@ import {MatPaginator, MatSort, MatTableDataSource} from '@angular/material';
   templateUrl: 'table-overview-example.html',
 })
 export class TableOverviewExample implements OnInit {
-  displayedColumns = ['id', 'name', 'progress', 'color'];
+  displayedColumns: string[] = ['id', 'name', 'progress', 'color'];
   dataSource: MatTableDataSource<UserData>;
 
   @ViewChild(MatPaginator) paginator: MatPaginator;
@@ -18,8 +32,7 @@ export class TableOverviewExample implements OnInit {
 
   constructor() {
     // Create 100 users
-    const users: UserData[] = [];
-    for (let i = 1; i <= 100; i++) { users.push(createNewUser(i)); }
+    const users = Array.from({length: 100}, (_, k) => createNewUser(k + 1));
 
     // Assign the data to the data source for the table to render
     this.dataSource = new MatTableDataSource(users);
@@ -31,9 +44,8 @@ export class TableOverviewExample implements OnInit {
   }
 
   applyFilter(filterValue: string) {
-    filterValue = filterValue.trim(); // Remove whitespace
-    filterValue = filterValue.toLowerCase(); // Datasource defaults to lowercase matches
-    this.dataSource.filter = filterValue;
+    this.dataSource.filter = filterValue.trim().toLowerCase();
+
     if (this.dataSource.paginator) {
       this.dataSource.paginator.firstPage();
     }
@@ -53,17 +65,3 @@ function createNewUser(id: number): UserData {
     color: COLORS[Math.round(Math.random() * (COLORS.length - 1))]
   };
 }
-
-/** Constants used to fill up our data base. */
-const COLORS = ['maroon', 'red', 'orange', 'yellow', 'olive', 'green', 'purple',
-  'fuchsia', 'lime', 'teal', 'aqua', 'blue', 'navy', 'black', 'gray'];
-const NAMES = ['Maia', 'Asher', 'Olivia', 'Atticus', 'Amelia', 'Jack',
-  'Charlotte', 'Theodore', 'Isla', 'Oliver', 'Isabella', 'Jasper',
-  'Cora', 'Levi', 'Violet', 'Arthur', 'Mia', 'Thomas', 'Elizabeth'];
-
-export interface UserData {
-  id: string;
-  name: string;
-  progress: string;
-  color: string;
-}
diff --git a/src/material-examples/table-pagination/table-pagination-example.ts b/src/material-examples/table-pagination/table-pagination-example.ts
index 6a4e03c5818c..e4cad373a8ea 100644
--- a/src/material-examples/table-pagination/table-pagination-example.ts
+++ b/src/material-examples/table-pagination/table-pagination-example.ts
@@ -10,7 +10,7 @@ import {MatPaginator, MatTableDataSource} from '@angular/material';
   templateUrl: 'table-pagination-example.html',
 })
 export class TablePaginationExample implements OnInit {
-  displayedColumns = ['position', 'name', 'weight', 'symbol'];
+  displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
   dataSource = new MatTableDataSource<PeriodicElement>(ELEMENT_DATA);
 
   @ViewChild(MatPaginator) paginator: MatPaginator;
diff --git a/src/material-examples/table-row-context/table-row-context-example.ts b/src/material-examples/table-row-context/table-row-context-example.ts
index 7799dd0547e1..5c041552f05c 100644
--- a/src/material-examples/table-row-context/table-row-context-example.ts
+++ b/src/material-examples/table-row-context/table-row-context-example.ts
@@ -9,6 +9,6 @@ import {Component} from '@angular/core';
   templateUrl: 'table-row-context-example.html',
 })
 export class TableRowContextExample {
-  displayedColumns = ['$implicit', 'index', 'count', 'first', 'last', 'even', 'odd'];
+  displayedColumns: string[] = ['$implicit', 'index', 'count', 'first', 'last', 'even', 'odd'];
   data: string[] = ['one', 'two', 'three', 'four', 'five'];
 }
diff --git a/src/material-examples/table-selection/table-selection-example.ts b/src/material-examples/table-selection/table-selection-example.ts
index cee88c81e7c8..153367376587 100644
--- a/src/material-examples/table-selection/table-selection-example.ts
+++ b/src/material-examples/table-selection/table-selection-example.ts
@@ -1,6 +1,26 @@
+import {SelectionModel} from '@angular/cdk/collections';
 import {Component} from '@angular/core';
 import {MatTableDataSource} from '@angular/material';
-import {SelectionModel} from '@angular/cdk/collections';
+
+export interface PeriodicElement {
+  name: string;
+  position: number;
+  weight: number;
+  symbol: string;
+}
+
+const ELEMENT_DATA: PeriodicElement[] = [
+  {position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
+  {position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
+  {position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
+  {position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be'},
+  {position: 5, name: 'Boron', weight: 10.811, symbol: 'B'},
+  {position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C'},
+  {position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N'},
+  {position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O'},
+  {position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F'},
+  {position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne'},
+];
 
 /**
  * @title Table with selection
@@ -11,7 +31,7 @@ import {SelectionModel} from '@angular/cdk/collections';
   templateUrl: 'table-selection-example.html',
 })
 export class TableSelectionExample {
-  displayedColumns = ['select', 'position', 'name', 'weight', 'symbol'];
+  displayedColumns: string[] = ['select', 'position', 'name', 'weight', 'symbol'];
   dataSource = new MatTableDataSource<PeriodicElement>(ELEMENT_DATA);
   selection = new SelectionModel<PeriodicElement>(true, []);
 
@@ -29,23 +49,3 @@ export class TableSelectionExample {
         this.dataSource.data.forEach(row => this.selection.select(row));
   }
 }
-
-export interface PeriodicElement {
-  name: string;
-  position: number;
-  weight: number;
-  symbol: string;
-}
-
-const ELEMENT_DATA: PeriodicElement[] = [
-  {position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
-  {position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
-  {position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
-  {position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be'},
-  {position: 5, name: 'Boron', weight: 10.811, symbol: 'B'},
-  {position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C'},
-  {position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N'},
-  {position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O'},
-  {position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F'},
-  {position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne'},
-];
diff --git a/src/material-examples/table-sorting/table-sorting-example.ts b/src/material-examples/table-sorting/table-sorting-example.ts
index 8878e7446c60..cc992b0eee29 100644
--- a/src/material-examples/table-sorting/table-sorting-example.ts
+++ b/src/material-examples/table-sorting/table-sorting-example.ts
@@ -1,25 +1,6 @@
 import {Component, OnInit, ViewChild} from '@angular/core';
 import {MatSort, MatTableDataSource} from '@angular/material';
 
-/**
- * @title Table with sorting
- */
-@Component({
-  selector: 'table-sorting-example',
-  styleUrls: ['table-sorting-example.css'],
-  templateUrl: 'table-sorting-example.html',
-})
-export class TableSortingExample implements OnInit {
-  displayedColumns = ['position', 'name', 'weight', 'symbol'];
-  dataSource = new MatTableDataSource(ELEMENT_DATA);
-
-  @ViewChild(MatSort) sort: MatSort;
-
-  ngOnInit() {
-    this.dataSource.sort = this.sort;
-  }
-}
-
 export interface PeriodicElement {
   name: string;
   position: number;
@@ -39,3 +20,22 @@ const ELEMENT_DATA: PeriodicElement[] = [
   {position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F'},
   {position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne'},
 ];
+
+/**
+ * @title Table with sorting
+ */
+@Component({
+  selector: 'table-sorting-example',
+  styleUrls: ['table-sorting-example.css'],
+  templateUrl: 'table-sorting-example.html',
+})
+export class TableSortingExample implements OnInit {
+  displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
+  dataSource = new MatTableDataSource(ELEMENT_DATA);
+
+  @ViewChild(MatSort) sort: MatSort;
+
+  ngOnInit() {
+    this.dataSource.sort = this.sort;
+  }
+}
diff --git a/src/material-examples/tooltip-custom-class/tooltip-custom-class-example.ts b/src/material-examples/tooltip-custom-class/tooltip-custom-class-example.ts
index 51e7f7545564..62419465536a 100644
--- a/src/material-examples/tooltip-custom-class/tooltip-custom-class-example.ts
+++ b/src/material-examples/tooltip-custom-class/tooltip-custom-class-example.ts
@@ -11,4 +11,4 @@ import {Component, ViewEncapsulation} from '@angular/core';
   // `tooltip-custom-class-example.css` will not be scoped to this component's view.
   encapsulation: ViewEncapsulation.None,
 })
-export class TooltipCustomClassExample { }
+export class TooltipCustomClassExample {}
diff --git a/src/material-examples/tooltip-position/tooltip-position-example.html b/src/material-examples/tooltip-position/tooltip-position-example.html
index f4b765516ac3..444dbad7adec 100644
--- a/src/material-examples/tooltip-position/tooltip-position-example.html
+++ b/src/material-examples/tooltip-position/tooltip-position-example.html
@@ -1,7 +1,7 @@
 <mat-form-field class="example-user-input">
   <mat-select placeholder="Tooltip position" [formControl]="position">
     <mat-option *ngFor="let positionOption of positionOptions" [value]="positionOption">
-      {{ positionOption }}
+      {{positionOption}}
     </mat-option>
   </mat-select>
 </mat-form-field>
diff --git a/src/material-examples/tree-checklist/tree-checklist-example.ts b/src/material-examples/tree-checklist/tree-checklist-example.ts
index 5407d08279f0..89ede449c067 100644
--- a/src/material-examples/tree-checklist/tree-checklist-example.ts
+++ b/src/material-examples/tree-checklist/tree-checklist-example.ts
@@ -1,9 +1,8 @@
-import {Component, Injectable} from '@angular/core';
 import {SelectionModel} from '@angular/cdk/collections';
 import {FlatTreeControl} from '@angular/cdk/tree';
-import {MatTreeFlattener, MatTreeFlatDataSource} from '@angular/material/tree';
-import {of as ofObservable, Observable, BehaviorSubject} from 'rxjs';
-
+import {Component, Injectable} from '@angular/core';
+import {MatTreeFlatDataSource, MatTreeFlattener} from '@angular/material/tree';
+import {BehaviorSubject, Observable, of as observableOf} from 'rxjs';
 
 /**
  * Node for to-do item
@@ -24,21 +23,21 @@ export class TodoItemFlatNode {
  * The Json object for to-do list data.
  */
 const TREE_DATA = {
-  'Reminders': [
-    'Cook dinner',
-    'Read the Material Design spec',
-    'Upgrade Application to Angular'
-  ],
-  'Groceries': {
+  Groceries: {
+    'Almond Meal flour': null,
     'Organic eggs': null,
     'Protein Powder': null,
-    'Almond Meal flour': null,
-    'Fruits': {
-      'Apple': null,
-      'Orange': null,
-      'Berries': ['Blueberry', 'Raspberry']
+    Fruits: {
+      Apple: null,
+      Berries: ['Blueberry', 'Raspberry'],
+      Orange: null
     }
-  }
+  },
+  Reminders: [
+    'Cook dinner',
+    'Read the Material Design spec',
+    'Upgrade Application to Angular'
+  ]
 };
 
 /**
@@ -48,7 +47,7 @@ const TREE_DATA = {
  */
 @Injectable()
 export class ChecklistDatabase {
-  dataChange: BehaviorSubject<TodoItemNode[]> = new BehaviorSubject<TodoItemNode[]>([]);
+  dataChange = new BehaviorSubject<TodoItemNode[]>([]);
 
   get data(): TodoItemNode[] { return this.dataChange.value; }
 
@@ -69,29 +68,28 @@ export class ChecklistDatabase {
    * Build the file structure tree. The `value` is the Json object, or a sub-tree of a Json object.
    * The return value is the list of `TodoItemNode`.
    */
-  buildFileTree(value: any, level: number) {
-    let data: any[] = [];
-    for (let k in value) {
-      let v = value[k];
-      let node = new TodoItemNode();
-      node.item = `${k}`;
-      if (v === null || v === undefined) {
-        // no action
-      } else if (typeof v === 'object') {
-        node.children = this.buildFileTree(v, level + 1);
-      } else {
-        node.item = v;
+  buildFileTree(obj: object, level: number): TodoItemNode[] {
+    return Object.keys(obj).reduce<TodoItemNode[]>((accumulator, key) => {
+      const value = obj[key];
+      const node = new TodoItemNode();
+      node.item = key;
+
+      if (value != null) {
+        if (typeof value === 'object') {
+          node.children = this.buildFileTree(value, level + 1);
+        } else {
+          node.item = value;
+        }
       }
-      data.push(node);
-    }
-    return data;
+
+      return accumulator.concat(node);
+    }, []);
   }
 
   /** Add an item to to-do list */
   insertItem(parent: TodoItemNode, name: string) {
-    const child = <TodoItemNode>{item: name};
     if (parent.children) {
-      parent.children.push(child);
+      parent.children.push({item: name} as TodoItemNode);
       this.dataChange.next(this.data);
     }
   }
@@ -113,16 +111,16 @@ export class ChecklistDatabase {
 })
 export class TreeChecklistExample {
   /** Map from flat node to nested node. This helps us finding the nested node to be modified */
-  flatNodeMap: Map<TodoItemFlatNode, TodoItemNode> = new Map<TodoItemFlatNode, TodoItemNode>();
+  flatNodeMap = new Map<TodoItemFlatNode, TodoItemNode>();
 
   /** Map from nested node to flattened node. This helps us to keep the same object for selection */
-  nestedNodeMap: Map<TodoItemNode, TodoItemFlatNode> = new Map<TodoItemNode, TodoItemFlatNode>();
+  nestedNodeMap = new Map<TodoItemNode, TodoItemFlatNode>();
 
   /** A selected parent node to be inserted */
   selectedParent: TodoItemFlatNode | null = null;
 
   /** The new item's name */
-  newItemName: string = '';
+  newItemName = '';
 
   treeControl: FlatTreeControl<TodoItemFlatNode>;
 
@@ -144,25 +142,24 @@ export class TreeChecklistExample {
     });
   }
 
-  getLevel = (node: TodoItemFlatNode) => { return node.level; };
+  getLevel = (node: TodoItemFlatNode) => node.level;
 
-  isExpandable = (node: TodoItemFlatNode) => { return node.expandable; };
+  isExpandable = (node: TodoItemFlatNode) => node.expandable;
 
-  getChildren = (node: TodoItemNode): Observable<TodoItemNode[]> => {
-    return ofObservable(node.children);
-  }
+  getChildren = (node: TodoItemNode): Observable<TodoItemNode[]> => observableOf(node.children);
 
-  hasChild = (_: number, _nodeData: TodoItemFlatNode) => { return _nodeData.expandable; };
+  hasChild = (_: number, _nodeData: TodoItemFlatNode) => _nodeData.expandable;
 
-  hasNoContent = (_: number, _nodeData: TodoItemFlatNode) => { return _nodeData.item === ''; };
+  hasNoContent = (_: number, _nodeData: TodoItemFlatNode) => _nodeData.item === '';
 
   /**
    * Transformer to convert nested node to flat node. Record the nodes in maps for later use.
    */
   transformer = (node: TodoItemNode, level: number) => {
-    let flatNode = this.nestedNodeMap.has(node) && this.nestedNodeMap.get(node)!.item === node.item
-      ? this.nestedNodeMap.get(node)!
-      : new TodoItemFlatNode();
+    const existingNode = this.nestedNodeMap.get(node);
+    const flatNode = existingNode && existingNode.item === node.item
+        ? existingNode
+        : new TodoItemFlatNode();
     flatNode.item = node.item;
     flatNode.level = level;
     flatNode.expandable = !!node.children;
diff --git a/src/material-examples/tree-dynamic/tree-dynamic-example.ts b/src/material-examples/tree-dynamic/tree-dynamic-example.ts
index e8dba37e61f7..bf3a9c19f6f9 100644
--- a/src/material-examples/tree-dynamic/tree-dynamic-example.ts
+++ b/src/material-examples/tree-dynamic/tree-dynamic-example.ts
@@ -1,37 +1,34 @@
-import {Component, Injectable} from '@angular/core';
-import {FlatTreeControl} from '@angular/cdk/tree';
 import {CollectionViewer, SelectionChange} from '@angular/cdk/collections';
-import {BehaviorSubject, Observable, merge} from 'rxjs';
+import {FlatTreeControl} from '@angular/cdk/tree';
+import {Component, Injectable} from '@angular/core';
+import {BehaviorSubject, merge, Observable} from 'rxjs';
 import {map} from 'rxjs/operators';
 
-
 /** Flat node with expandable and level information */
 export class DynamicFlatNode {
-  constructor(public item: string, public level: number = 1, public expandable: boolean = false,
-              public isLoading: boolean = false) {}
+  constructor(public item: string, public level = 1, public expandable = false,
+              public isLoading = false) {}
 }
 
-
 /**
  * Database for dynamic data. When expanding a node in the tree, the data source will need to fetch
  * the descendants data from the database.
  */
 export class DynamicDatabase {
-  dataMap = new Map([
+  dataMap = new Map<string, string[]>([
     ['Fruits', ['Apple', 'Orange', 'Banana']],
     ['Vegetables', ['Tomato', 'Potato', 'Onion']],
     ['Apple', ['Fuji', 'Macintosh']],
     ['Onion', ['Yellow', 'White', 'Purple']]
   ]);
 
-  rootLevelNodes = ['Fruits', 'Vegetables'];
+  rootLevelNodes: string[] = ['Fruits', 'Vegetables'];
 
   /** Initial data from database */
   initialData(): DynamicFlatNode[] {
     return this.rootLevelNodes.map(name => new DynamicFlatNode(name, 0, true));
   }
 
-
   getChildren(node: string): string[] | undefined {
     return this.dataMap.get(node);
   }
@@ -50,7 +47,7 @@ export class DynamicDatabase {
 @Injectable()
 export class DynamicDataSource {
 
-  dataChange: BehaviorSubject<DynamicFlatNode[]> = new BehaviorSubject<DynamicFlatNode[]>([]);
+  dataChange = new BehaviorSubject<DynamicFlatNode[]>([]);
 
   get data(): DynamicFlatNode[] { return this.dataChange.value; }
   set data(value: DynamicFlatNode[]) {
@@ -75,10 +72,10 @@ export class DynamicDataSource {
   /** Handle expand/collapse behaviors */
   handleTreeControl(change: SelectionChange<DynamicFlatNode>) {
     if (change.added) {
-      change.added.forEach((node) => this.toggleNode(node, true));
+      change.added.forEach(node => this.toggleNode(node, true));
     }
     if (change.removed) {
-      change.removed.reverse().forEach((node) => this.toggleNode(node, false));
+      change.removed.slice().reverse().forEach(node => this.toggleNode(node, false));
     }
   }
 
@@ -120,7 +117,6 @@ export class DynamicDataSource {
   providers: [DynamicDatabase]
 })
 export class TreeDynamicExample {
-
   constructor(database: DynamicDatabase) {
     this.treeControl = new FlatTreeControl<DynamicFlatNode>(this.getLevel, this.isExpandable);
     this.dataSource = new DynamicDataSource(this.treeControl, database);
@@ -132,9 +128,9 @@ export class TreeDynamicExample {
 
   dataSource: DynamicDataSource;
 
-  getLevel = (node: DynamicFlatNode) => { return node.level; };
+  getLevel = (node: DynamicFlatNode) => node.level;
 
-  isExpandable = (node: DynamicFlatNode) => { return node.expandable; };
+  isExpandable = (node: DynamicFlatNode) => node.expandable;
 
-  hasChild = (_: number, _nodeData: DynamicFlatNode) => { return _nodeData.expandable; };
+  hasChild = (_: number, _nodeData: DynamicFlatNode) => _nodeData.expandable;
 }
diff --git a/src/material-examples/tree-flat-overview/tree-flat-overview-example.ts b/src/material-examples/tree-flat-overview/tree-flat-overview-example.ts
index ebdaf064f6b7..ba7a4dad1d6a 100644
--- a/src/material-examples/tree-flat-overview/tree-flat-overview-example.ts
+++ b/src/material-examples/tree-flat-overview/tree-flat-overview-example.ts
@@ -15,51 +15,48 @@ export class FileNode {
 
 /** Flat node with expandable and level information */
 export class FileFlatNode {
-  filename: string;
-  type: any;
-  level: number;
-  expandable: boolean;
+  constructor(
+    public expandable: boolean, public filename: string, public level: number, public type: any) {}
 }
 
 /**
  * The file structure tree data in string. The data could be parsed into a Json object
  */
-const TREE_DATA = `
-  {
-    "Documents": {
-      "angular": {
-        "src": {
-          "core": "ts",
-          "compiler": "ts"
-        }
-      },
-      "material2": {
-        "src": {
-          "button": "ts",
-          "checkbox": "ts",
-          "input": "ts"
-        }
+const TREE_DATA = JSON.stringify({
+  Applications: {
+    Calendar: 'app',
+    Chrome: 'app',
+    Webstorm: 'app'
+  },
+  Documents: {
+    angular: {
+      src: {
+        compiler: 'ts',
+        core: 'ts'
       }
     },
-    "Downloads": {
-        "Tutorial": "html",
-        "November": "pdf",
-        "October": "pdf"
-    },
-    "Pictures": {
-        "Sun": "png",
-        "Woods": "jpg",
-        "Photo Booth Library": {
-          "Contents": "dir",
-          "Pictures": "dir"
-        }
-    },
-    "Applications": {
-        "Chrome": "app",
-        "Calendar": "app",
-        "Webstorm": "app"
+    material2: {
+      src: {
+        button: 'ts',
+        checkbox: 'ts',
+        input: 'ts'
+      }
     }
-}`;
+  },
+  Downloads: {
+    October: 'pdf',
+    November: 'pdf',
+    Tutorial: 'html'
+  },
+  Pictures: {
+    'Photo Booth Library': {
+      Contents: 'dir',
+      Pictures: 'dir'
+    },
+    Sun: 'png',
+    Woods: 'jpg'
+  }
+});
 
 /**
  * File database, it can build a tree structured Json object from string.
@@ -70,7 +67,7 @@ const TREE_DATA = `
  */
 @Injectable()
 export class FileDatabase {
-  dataChange: BehaviorSubject<FileNode[]> = new BehaviorSubject<FileNode[]>([]);
+  dataChange = new BehaviorSubject<FileNode[]>([]);
 
   get data(): FileNode[] { return this.dataChange.value; }
 
@@ -94,22 +91,22 @@ export class FileDatabase {
    * Build the file structure tree. The `value` is the Json object, or a sub-tree of a Json object.
    * The return value is the list of `FileNode`.
    */
-  buildFileTree(value: any, level: number): FileNode[] {
-    let data: any[] = [];
-    for (let k in value) {
-      let v = value[k];
-      let node = new FileNode();
-      node.filename = `${k}`;
-      if (v === null || v === undefined) {
-        // no action
-      } else if (typeof v === 'object') {
-        node.children = this.buildFileTree(v, level + 1);
-      } else {
-        node.type = v;
+  buildFileTree(obj: object, level: number): FileNode[] {
+    return Object.keys(obj).reduce<FileNode[]>((accumulator, key) => {
+      const value = obj[key];
+      const node = new FileNode();
+      node.filename = key;
+
+      if (value != null) {
+        if (typeof value === 'object') {
+          node.children = this.buildFileTree(value, level + 1);
+        } else {
+          node.type = value;
+        }
       }
-      data.push(node);
-    }
-    return data;
+
+      return accumulator.concat(node);
+    }, []);
   }
 }
 
@@ -123,11 +120,8 @@ export class FileDatabase {
   providers: [FileDatabase]
 })
 export class TreeFlatOverviewExample {
-
   treeControl: FlatTreeControl<FileFlatNode>;
-
   treeFlattener: MatTreeFlattener<FileNode, FileFlatNode>;
-
   dataSource: MatTreeFlatDataSource<FileNode, FileFlatNode>;
 
   constructor(database: FileDatabase) {
@@ -136,27 +130,18 @@ export class TreeFlatOverviewExample {
     this.treeControl = new FlatTreeControl<FileFlatNode>(this._getLevel, this._isExpandable);
     this.dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener);
 
-    database.dataChange.subscribe(data => {
-      this.dataSource.data = data;
-    });
+    database.dataChange.subscribe(data => this.dataSource.data = data);
   }
 
   transformer = (node: FileNode, level: number) => {
-    let flatNode = new FileFlatNode();
-    flatNode.filename = node.filename;
-    flatNode.type = node.type;
-    flatNode.level = level;
-    flatNode.expandable = !!node.children;
-    return flatNode;
+    return new FileFlatNode(!!node.children, node.filename, level, node.type);
   }
 
-  private _getLevel = (node: FileFlatNode) => { return node.level; };
+  private _getLevel = (node: FileFlatNode) => node.level;
 
-  private _isExpandable = (node: FileFlatNode) => { return node.expandable; };
+  private _isExpandable = (node: FileFlatNode) => node.expandable;
 
-  private _getChildren = (node: FileNode): Observable<FileNode[]> => {
-    return observableOf(node.children);
-  }
+  private _getChildren = (node: FileNode): Observable<FileNode[]> => observableOf(node.children);
 
-  hasChild = (_: number, _nodeData: FileFlatNode) => { return _nodeData.expandable; };
+  hasChild = (_: number, _nodeData: FileFlatNode) => _nodeData.expandable;
 }
diff --git a/src/material-examples/tree-loadmore/tree-loadmore-example.ts b/src/material-examples/tree-loadmore/tree-loadmore-example.ts
index 559ca190fca1..0c958a8a97d4 100644
--- a/src/material-examples/tree-loadmore/tree-loadmore-example.ts
+++ b/src/material-examples/tree-loadmore/tree-loadmore-example.ts
@@ -5,32 +5,31 @@
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
-import {Component, Injectable} from '@angular/core';
 import {FlatTreeControl} from '@angular/cdk/tree';
+import {Component, Injectable} from '@angular/core';
 import {MatTreeFlatDataSource, MatTreeFlattener} from '@angular/material/tree';
 import {BehaviorSubject, Observable} from 'rxjs';
 
-
 const LOAD_MORE = 'LOAD_MORE';
 
 /** Nested node */
 export class LoadmoreNode {
-  childrenChange: BehaviorSubject<LoadmoreNode[]> = new BehaviorSubject<LoadmoreNode[]>([]);
+  childrenChange = new BehaviorSubject<LoadmoreNode[]>([]);
 
   get children(): LoadmoreNode[] {
     return this.childrenChange.value;
   }
 
   constructor(public item: string,
-              public hasChildren: boolean = false,
+              public hasChildren = false,
               public loadMoreParentItem: string | null = null) {}
 }
 
 /** Flat node with expandable and level information */
 export class LoadmoreFlatNode {
   constructor(public item: string,
-              public level: number = 1,
-              public expandable: boolean = false,
+              public level = 1,
+              public expandable = false,
               public loadMoreParentItem: string | null = null) {}
 }
 
@@ -41,12 +40,12 @@ export class LoadmoreFlatNode {
 @Injectable()
 export class LoadmoreDatabase {
   batchNumber = 5;
-  dataChange: BehaviorSubject<LoadmoreNode[]> = new BehaviorSubject<LoadmoreNode[]>([]);
-  nodeMap: Map<string, LoadmoreNode> = new Map<string, LoadmoreNode>();
+  dataChange = new BehaviorSubject<LoadmoreNode[]>([]);
+  nodeMap = new Map<string, LoadmoreNode>();
 
   /** The data */
-  rootLevelNodes = ['Vegetables', 'Fruits'];
-  dataMap = new Map([
+  rootLevelNodes: string[] = ['Vegetables', 'Fruits'];
+  dataMap = new Map<string, string[]>([
     ['Fruits', ['Apple', 'Orange', 'Banana']],
     ['Vegetables', ['Tomato', 'Potato', 'Onion']],
     ['Apple', ['Fuji', 'Macintosh']],
@@ -59,7 +58,7 @@ export class LoadmoreDatabase {
   }
 
   /** Expand a node whose children are not loaded */
-  loadMore(item: string, onlyFirstTime: boolean = false) {
+  loadMore(item: string, onlyFirstTime = false) {
     if (!this.nodeMap.has(item) || !this.dataMap.has(item)) {
       return;
     }
@@ -69,7 +68,7 @@ export class LoadmoreDatabase {
       return;
     }
     const newChildrenNumber = parent.children!.length + this.batchNumber;
-    let nodes = children.slice(0, newChildrenNumber)
+    const nodes = children.slice(0, newChildrenNumber)
       .map(name => this._generateNode(name));
     if (newChildrenNumber < children.length) {
       // Need a new load more node
@@ -100,13 +99,9 @@ export class LoadmoreDatabase {
   providers: [LoadmoreDatabase]
 })
 export class TreeLoadmoreExample {
-
-  nodeMap: Map<string, LoadmoreFlatNode> = new Map<string, LoadmoreFlatNode>();
-
+  nodeMap = new Map<string, LoadmoreFlatNode>();
   treeControl: FlatTreeControl<LoadmoreFlatNode>;
-
   treeFlattener: MatTreeFlattener<LoadmoreNode, LoadmoreFlatNode>;
-
   // Flat tree data source
   dataSource: MatTreeFlatDataSource<LoadmoreNode, LoadmoreFlatNode>;
 
@@ -125,24 +120,28 @@ export class TreeLoadmoreExample {
     database.initialize();
   }
 
-  getChildren = (node: LoadmoreNode): Observable<LoadmoreNode[]> => { return node.childrenChange; };
+  getChildren = (node: LoadmoreNode): Observable<LoadmoreNode[]> => node.childrenChange;
 
   transformer = (node: LoadmoreNode, level: number) => {
-    if (this.nodeMap.has(node.item)) {
-      return this.nodeMap.get(node.item)!;
+    const existingNode = this.nodeMap.get(node.item);
+
+    if (existingNode) {
+      return existingNode;
     }
-    let newNode = new LoadmoreFlatNode(node.item, level, node.hasChildren, node.loadMoreParentItem);
+
+    const newNode =
+        new LoadmoreFlatNode(node.item, level, node.hasChildren, node.loadMoreParentItem);
     this.nodeMap.set(node.item, newNode);
     return newNode;
   }
 
-  getLevel = (node: LoadmoreFlatNode) => { return node.level; };
+  getLevel = (node: LoadmoreFlatNode) => node.level;
 
-  isExpandable = (node: LoadmoreFlatNode) => { return node.expandable; };
+  isExpandable = (node: LoadmoreFlatNode) => node.expandable;
 
-  hasChild = (_: number, _nodeData: LoadmoreFlatNode) => { return _nodeData.expandable; };
+  hasChild = (_: number, _nodeData: LoadmoreFlatNode) => _nodeData.expandable;
 
-  isLoadMore = (_: number, _nodeData: LoadmoreFlatNode) => { return _nodeData.item === LOAD_MORE; };
+  isLoadMore = (_: number, _nodeData: LoadmoreFlatNode) => _nodeData.item === LOAD_MORE;
 
   /** Load more nodes from data source */
   loadMore(item: string) {
diff --git a/src/material-examples/tree-nested-overview/tree-nested-overview-example.ts b/src/material-examples/tree-nested-overview/tree-nested-overview-example.ts
index bdc37e34b6be..a6031236500a 100644
--- a/src/material-examples/tree-nested-overview/tree-nested-overview-example.ts
+++ b/src/material-examples/tree-nested-overview/tree-nested-overview-example.ts
@@ -15,42 +15,41 @@ export class FileNode {
 /**
  * The Json tree data in string. The data could be parsed into Json object
  */
-const TREE_DATA = `
-  {
-    "Documents": {
-      "angular": {
-        "src": {
-          "core": "ts",
-          "compiler": "ts"
-        }
-      },
-      "material2": {
-        "src": {
-          "button": "ts",
-          "checkbox": "ts",
-          "input": "ts"
-        }
+const TREE_DATA = JSON.stringify({
+  Applications: {
+    Calendar: 'app',
+    Chrome: 'app',
+    Webstorm: 'app'
+  },
+  Documents: {
+    angular: {
+      src: {
+        compiler: 'ts',
+        core: 'ts'
       }
     },
-    "Downloads": {
-        "Tutorial": "html",
-        "November": "pdf",
-        "October": "pdf"
-    },
-    "Pictures": {
-        "Sun": "png",
-        "Woods": "jpg",
-        "Photo Booth Library": {
-          "Contents": "dir",
-          "Pictures": "dir"
-        }
-    },
-    "Applications": {
-        "Chrome": "app",
-        "Calendar": "app",
-        "Webstorm": "app"
+    material2: {
+      src: {
+        button: 'ts',
+        checkbox: 'ts',
+        input: 'ts'
+      }
     }
-  }`;
+  },
+  Downloads: {
+    October: 'pdf',
+    November: 'pdf',
+    Tutorial: 'html'
+  },
+  Pictures: {
+    'Photo Booth Library': {
+      Contents: 'dir',
+      Pictures: 'dir'
+    },
+    Sun: 'png',
+    Woods: 'jpg'
+  }
+});
 
 /**
  * File database, it can build a tree structured Json object from string.
@@ -61,7 +60,7 @@ const TREE_DATA = `
  */
 @Injectable()
 export class FileDatabase {
-  dataChange: BehaviorSubject<FileNode[]> = new BehaviorSubject<FileNode[]>([]);
+  dataChange = new BehaviorSubject<FileNode[]>([]);
 
   get data(): FileNode[] { return this.dataChange.value; }
 
@@ -85,22 +84,22 @@ export class FileDatabase {
    * Build the file structure tree. The `value` is the Json object, or a sub-tree of a Json object.
    * The return value is the list of `FileNode`.
    */
-  buildFileTree(value: any, level: number): FileNode[] {
-    let data: any[] = [];
-    for (let k in value) {
-      let v = value[k];
-      let node = new FileNode();
-      node.filename = `${k}`;
-      if (v === null || v === undefined) {
-        // no action
-      } else if (typeof v === 'object') {
-        node.children = this.buildFileTree(v, level + 1);
-      } else {
-        node.type = v;
+  buildFileTree(obj: object, level: number): FileNode[] {
+    return Object.keys(obj).reduce<FileNode[]>((accumulator, key) => {
+      const value = obj[key];
+      const node = new FileNode();
+      node.filename = key;
+
+      if (value != null) {
+        if (typeof value === 'object') {
+          node.children = this.buildFileTree(value, level + 1);
+        } else {
+          node.type = value;
+        }
       }
-      data.push(node);
-    }
-    return data;
+
+      return accumulator.concat(node);
+    }, []);
   }
 }
 
@@ -115,7 +114,6 @@ export class FileDatabase {
 })
 export class TreeNestedOverviewExample {
   nestedTreeControl: NestedTreeControl<FileNode>;
-
   nestedDataSource: MatTreeNestedDataSource<FileNode>;
 
   constructor(database: FileDatabase) {
@@ -125,7 +123,7 @@ export class TreeNestedOverviewExample {
     database.dataChange.subscribe(data => this.nestedDataSource.data = data);
   }
 
-  private _getChildren = (node: FileNode) => { return observableOf(node.children); };
+  hasNestedChild = (_: number, nodeData: FileNode) => !nodeData.type;
 
-  hasNestedChild = (_: number, nodeData: FileNode) => {return !(nodeData.type); };
+  private _getChildren = (node: FileNode) => observableOf(node.children);
 }