diff --git a/src/assets/angular-material-examples/autocomplete-auto-active-first-option/autocomplete-auto-active-first-option-example.html b/src/assets/angular-material-examples/autocomplete-auto-active-first-option/autocomplete-auto-active-first-option-example.html
index 45090946..50dd982f 100755
--- a/src/assets/angular-material-examples/autocomplete-auto-active-first-option/autocomplete-auto-active-first-option-example.html
+++ b/src/assets/angular-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/assets/angular-material-examples/autocomplete-auto-active-first-option/autocomplete-auto-active-first-option-example.ts b/src/assets/angular-material-examples/autocomplete-auto-active-first-option/autocomplete-auto-active-first-option-example.ts
index 3a5adb69..f510c8d2 100755
--- a/src/assets/angular-material-examples/autocomplete-auto-active-first-option/autocomplete-auto-active-first-option-example.ts
+++ b/src/assets/angular-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/assets/angular-material-examples/autocomplete-display/autocomplete-display-example.html b/src/assets/angular-material-examples/autocomplete-display/autocomplete-display-example.html
index 6f7be462..5daac573 100755
--- a/src/assets/angular-material-examples/autocomplete-display/autocomplete-display-example.html
+++ b/src/assets/angular-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/assets/angular-material-examples/autocomplete-display/autocomplete-display-example.ts b/src/assets/angular-material-examples/autocomplete-display/autocomplete-display-example.ts
index eb530ade..adf9aa23 100755
--- a/src/assets/angular-material-examples/autocomplete-display/autocomplete-display-example.ts
+++ b/src/assets/angular-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/assets/angular-material-examples/autocomplete-filter/autocomplete-filter-example.html b/src/assets/angular-material-examples/autocomplete-filter/autocomplete-filter-example.html
index 3e685d80..3a5aefad 100755
--- a/src/assets/angular-material-examples/autocomplete-filter/autocomplete-filter-example.html
+++ b/src/assets/angular-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/assets/angular-material-examples/autocomplete-filter/autocomplete-filter-example.ts b/src/assets/angular-material-examples/autocomplete-filter/autocomplete-filter-example.ts
index 44f70a68..6425a755 100755
--- a/src/assets/angular-material-examples/autocomplete-filter/autocomplete-filter-example.ts
+++ b/src/assets/angular-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/assets/angular-material-examples/autocomplete-optgroup/autocomplete-optgroup-example.html b/src/assets/angular-material-examples/autocomplete-optgroup/autocomplete-optgroup-example.html
index 9fe26b24..0d9a4bf8 100755
--- a/src/assets/angular-material-examples/autocomplete-optgroup/autocomplete-optgroup-example.html
+++ b/src/assets/angular-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/assets/angular-material-examples/autocomplete-optgroup/autocomplete-optgroup-example.ts b/src/assets/angular-material-examples/autocomplete-optgroup/autocomplete-optgroup-example.ts
index fd43d54b..75e0e13c 100755
--- a/src/assets/angular-material-examples/autocomplete-optgroup/autocomplete-optgroup-example.ts
+++ b/src/assets/angular-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/assets/angular-material-examples/autocomplete-overview/autocomplete-overview-example.css b/src/assets/angular-material-examples/autocomplete-overview/autocomplete-overview-example.css
index 08fa6753..473fdf92 100755
--- a/src/assets/angular-material-examples/autocomplete-overview/autocomplete-overview-example.css
+++ b/src/assets/angular-material-examples/autocomplete-overview/autocomplete-overview-example.css
@@ -7,3 +7,13 @@
 .example-full-width {
   width: 100%;
 }
+
+.example-option-img {
+  vertical-align: middle;
+  margin-right: 8px;
+}
+
+[dir='rtl'] .example-option-img {
+  margin-right: 0;
+  margin-left: 8px;
+}
diff --git a/src/assets/angular-material-examples/autocomplete-overview/autocomplete-overview-example.html b/src/assets/angular-material-examples/autocomplete-overview/autocomplete-overview-example.html
index 9b6179e7..09ab07fa 100755
--- a/src/assets/angular-material-examples/autocomplete-overview/autocomplete-overview-example.html
+++ b/src/assets/angular-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/assets/angular-material-examples/autocomplete-overview/autocomplete-overview-example.ts b/src/assets/angular-material-examples/autocomplete-overview/autocomplete-overview-example.ts
index 26f8faa2..a3219203 100755
--- a/src/assets/angular-material-examples/autocomplete-overview/autocomplete-overview-example.ts
+++ b/src/assets/angular-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/assets/angular-material-examples/autocomplete-simple/autocomplete-simple-example.html b/src/assets/angular-material-examples/autocomplete-simple/autocomplete-simple-example.html
index 57a30943..cfd6bdf2 100755
--- a/src/assets/angular-material-examples/autocomplete-simple/autocomplete-simple-example.html
+++ b/src/assets/angular-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/assets/angular-material-examples/autocomplete-simple/autocomplete-simple-example.ts b/src/assets/angular-material-examples/autocomplete-simple/autocomplete-simple-example.ts
index c3f1bcb6..94c673db 100755
--- a/src/assets/angular-material-examples/autocomplete-simple/autocomplete-simple-example.ts
+++ b/src/assets/angular-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/assets/angular-material-examples/badge-overview/badge-overview-example.ts b/src/assets/angular-material-examples/badge-overview/badge-overview-example.ts
index 30ba295e..ff0a597b 100755
--- a/src/assets/angular-material-examples/badge-overview/badge-overview-example.ts
+++ b/src/assets/angular-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/assets/angular-material-examples/button-types/button-types-example.css b/src/assets/angular-material-examples/button-types/button-types-example.css
index 9771bda6..d9ce5779 100755
--- a/src/assets/angular-material-examples/button-types/button-types-example.css
+++ b/src/assets/angular-material-examples/button-types/button-types-example.css
@@ -1,5 +1,4 @@
-.example-button-row {
-  display: flex;
-  align-items: center;
-  justify-content: space-around;
+.button-row button,
+.button-row a {
+  margin-right: 8px;
 }
diff --git a/src/assets/angular-material-examples/button-types/button-types-example.html b/src/assets/angular-material-examples/button-types/button-types-example.html
index 852556d9..710c1415 100755
--- a/src/assets/angular-material-examples/button-types/button-types-example.html
+++ b/src/assets/angular-material-examples/button-types/button-types-example.html
@@ -18,6 +18,26 @@
   <a mat-raised-button routerLink=".">Link</a>
 </div>
 
+<h3>Stroked Buttons</h3>
+<div class="button-row">
+  <button mat-stroked-button>Basic</button>
+  <button mat-stroked-button color="primary">Primary</button>
+  <button mat-stroked-button color="accent">Accent</button>
+  <button mat-stroked-button color="warn">Warn</button>
+  <button mat-stroked-button disabled>Disabled</button>
+  <a mat-stroked-button routerLink=".">Link</a>
+</div>
+
+<h3>Flat Buttons</h3>
+<div class="button-row">
+  <button mat-flat-button>Basic</button>
+  <button mat-flat-button color="primary">Primary</button>
+  <button mat-flat-button color="accent">Accent</button>
+  <button mat-flat-button color="warn">Warn</button>
+  <button mat-flat-button disabled>Disabled</button>
+  <a mat-flat-button routerLink=".">Link</a>
+</div>
+
 <h3>Icon Buttons</h3>
 <div class="button-row">
   <button mat-icon-button>
@@ -61,4 +81,4 @@
     <mat-icon aria-label="Example icon-button with a heart icon">favorite</mat-icon>
   </button>
   <a mat-mini-fab routerLink=".">Link</a>
-</div>
+</div>
\ No newline at end of file
diff --git a/src/assets/angular-material-examples/cdk-table-basic-flex/cdk-table-basic-flex-example.ts b/src/assets/angular-material-examples/cdk-table-basic-flex/cdk-table-basic-flex-example.ts
index b117d4de..6e255f9a 100755
--- a/src/assets/angular-material-examples/cdk-table-basic-flex/cdk-table-basic-flex-example.ts
+++ b/src/assets/angular-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/assets/angular-material-examples/cdk-table-basic/cdk-table-basic-example.ts b/src/assets/angular-material-examples/cdk-table-basic/cdk-table-basic-example.ts
index 57ca6060..c1f06e45 100755
--- a/src/assets/angular-material-examples/cdk-table-basic/cdk-table-basic-example.ts
+++ b/src/assets/angular-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/assets/angular-material-examples/cdk-tree-flat/cdk-tree-flat-example.css b/src/assets/angular-material-examples/cdk-tree-flat/cdk-tree-flat-example.css
index 775f4802..a88255f0 100755
--- a/src/assets/angular-material-examples/cdk-tree-flat/cdk-tree-flat-example.css
+++ b/src/assets/angular-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/assets/angular-material-examples/cdk-tree-flat/cdk-tree-flat-example.html b/src/assets/angular-material-examples/cdk-tree-flat/cdk-tree-flat-example.html
index f6389208..1ad37095 100755
--- a/src/assets/angular-material-examples/cdk-tree-flat/cdk-tree-flat-example.html
+++ b/src/assets/angular-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/assets/angular-material-examples/cdk-tree-flat/cdk-tree-flat-example.ts b/src/assets/angular-material-examples/cdk-tree-flat/cdk-tree-flat-example.ts
index ebfaad12..9f948712 100755
--- a/src/assets/angular-material-examples/cdk-tree-flat/cdk-tree-flat-example.ts
+++ b/src/assets/angular-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 _isExpandable = (node: FileFlatNode) => node.expandable;
 
-  private _getChildren = (node: FileNode): Observable<FileNode[]> => {
-    return observableOf(node.children);
-  }
-
-  hasChild = (_: number, _nodeData: FileFlatNode) => { return _nodeData.expandable; };
+  private _getChildren = (node: FileNode): Observable<FileNode[]> => observableOf(node.children);
 }
diff --git a/src/assets/angular-material-examples/cdk-tree-nested/cdk-tree-nested-example.ts b/src/assets/angular-material-examples/cdk-tree-nested/cdk-tree-nested-example.ts
index cca891b3..3809879c 100755
--- a/src/assets/angular-material-examples/cdk-tree-nested/cdk-tree-nested-example.ts
+++ b/src/assets/angular-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/assets/angular-material-examples/chips-autocomplete/chips-autocomplete-example.css b/src/assets/angular-material-examples/chips-autocomplete/chips-autocomplete-example.css
index 505a4c66..fecda9cd 100755
--- a/src/assets/angular-material-examples/chips-autocomplete/chips-autocomplete-example.css
+++ b/src/assets/angular-material-examples/chips-autocomplete/chips-autocomplete-example.css
@@ -1,3 +1,3 @@
-.demo-chip-list {
+.example-chip-list {
   width: 100%;
 }
diff --git a/src/assets/angular-material-examples/chips-autocomplete/chips-autocomplete-example.html b/src/assets/angular-material-examples/chips-autocomplete/chips-autocomplete-example.html
index 1099c6ca..9477edb3 100755
--- a/src/assets/angular-material-examples/chips-autocomplete/chips-autocomplete-example.html
+++ b/src/assets/angular-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/assets/angular-material-examples/chips-autocomplete/chips-autocomplete-example.ts b/src/assets/angular-material-examples/chips-autocomplete/chips-autocomplete-example.ts
index 20c5f49e..2c3a3c0e 100755
--- a/src/assets/angular-material-examples/chips-autocomplete/chips-autocomplete-example.ts
+++ b/src/assets/angular-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/assets/angular-material-examples/chips-input/chips-input-example.css b/src/assets/angular-material-examples/chips-input/chips-input-example.css
index 505a4c66..fecda9cd 100755
--- a/src/assets/angular-material-examples/chips-input/chips-input-example.css
+++ b/src/assets/angular-material-examples/chips-input/chips-input-example.css
@@ -1,3 +1,3 @@
-.demo-chip-list {
+.example-chip-list {
   width: 100%;
 }
diff --git a/src/assets/angular-material-examples/chips-input/chips-input-example.html b/src/assets/angular-material-examples/chips-input/chips-input-example.html
index 3ae37acc..af72c317 100755
--- a/src/assets/angular-material-examples/chips-input/chips-input-example.html
+++ b/src/assets/angular-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/assets/angular-material-examples/chips-input/chips-input-example.ts b/src/assets/angular-material-examples/chips-input/chips-input-example.ts
index e90a5e6e..9c293017 100755
--- a/src/assets/angular-material-examples/chips-input/chips-input-example.ts
+++ b/src/assets/angular-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;
+  readonly 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/assets/angular-material-examples/chips-overview/chips-overview-example.html b/src/assets/angular-material-examples/chips-overview/chips-overview-example.html
index 3228bc87..8ca14537 100755
--- a/src/assets/angular-material-examples/chips-overview/chips-overview-example.html
+++ b/src/assets/angular-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/assets/angular-material-examples/chips-stacked/chips-stacked-example.html b/src/assets/angular-material-examples/chips-stacked/chips-stacked-example.html
index e4c7613d..1c6832f6 100755
--- a/src/assets/angular-material-examples/chips-stacked/chips-stacked-example.html
+++ b/src/assets/angular-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/assets/angular-material-examples/chips-stacked/chips-stacked-example.ts b/src/assets/angular-material-examples/chips-stacked/chips-stacked-example.ts
index 816c2264..35c4073b 100755
--- a/src/assets/angular-material-examples/chips-stacked/chips-stacked-example.ts
+++ b/src/assets/angular-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/assets/angular-material-examples/datepicker-custom-header/datepicker-custom-header-example.ts b/src/assets/angular-material-examples/datepicker-custom-header/datepicker-custom-header-example.ts
index 4ae0dd54..ec549763 100755
--- a/src/assets/angular-material-examples/datepicker-custom-header/datepicker-custom-header-example.ts
+++ b/src/assets/angular-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/assets/angular-material-examples/datepicker-touch/datepicker-touch-example.html b/src/assets/angular-material-examples/datepicker-touch/datepicker-touch-example.html
index 7cec1f8e..70a7e61e 100755
--- a/src/assets/angular-material-examples/datepicker-touch/datepicker-touch-example.html
+++ b/src/assets/angular-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/assets/angular-material-examples/datepicker-views-selection/datepicker-views-selection-example.ts b/src/assets/angular-material-examples/datepicker-views-selection/datepicker-views-selection-example.ts
index f6660671..8bda5f87 100755
--- a/src/assets/angular-material-examples/datepicker-views-selection/datepicker-views-selection-example.ts
+++ b/src/assets/angular-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';
@@ -35,7 +35,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/assets/angular-material-examples/dialog-content/dialog-content-example-dialog.html b/src/assets/angular-material-examples/dialog-content/dialog-content-example-dialog.html
index 2da84e73..a5f12bc6 100755
--- a/src/assets/angular-material-examples/dialog-content/dialog-content-example-dialog.html
+++ b/src/assets/angular-material-examples/dialog-content/dialog-content-example-dialog.html
@@ -1,25 +1,64 @@
 <h2 mat-dialog-title>Install Angular</h2>
-<mat-dialog-content>
-  <h3>DEVELOP ACROSS ALL PLATFORMS</h3>
-  <p>Learn one way to build applications with Angular and reuse your code and abilities to build 
+<mat-dialog-content class="mat-typography">
+  <h3>Develop across all platforms</h3>
+  <p>Learn one way to build applications with Angular and reuse your code and abilities to build
     apps for any deployment target. For web, mobile web, native mobile and native desktop.</p>
-  
-  <h3>SPEED &amp; PERFORMANCE</h3>
-  <p>Achieve the maximum speed possible on the Web Platform today, and take it further, via Web 
-    Workers and server-side rendering. Angular puts you in control over scalability. Meet huge data requirements 
-    by building data models on RxJS, Immutable.js or another push-model.</p>
-  
-  <h3>INCREDIBLE TOOLING</h3>
-  <p>Build features quickly with simple, declarative templates. Extend the template language with your own 
-    components and use a wide array of existing components. Get immediate Angular-specific help and feedback 
-    with nearly every IDE and editor. All this comes together so you can focus on building amazing apps rather 
-    than trying to make the code work.</p>
-  
-  <h3>LOVED BY MILLIONS</h3>
-  <p>From prototype through global deployment, Angular delivers the productivity and scalable infrastructure 
-    that supports Google's largest applications.</p>
+
+  <h3>Speed &amp; Performance</h3>
+  <p>Achieve the maximum speed possible on the Web Platform today, and take it further, via Web
+    Workers and server-side rendering. Angular puts you in control over scalability. Meet huge
+    data requirements by building data models on RxJS, Immutable.js or another push-model.</p>
+
+  <h3>Incredible tooling</h3>
+  <p>Build features quickly with simple, declarative templates. Extend the template language with
+    your own components and use a wide array of existing components. Get immediate Angular-specific
+    help and feedback with nearly every IDE and editor. All this comes together so you can focus
+    on building amazing apps rather than trying to make the code work.</p>
+
+  <h3>Loved by millions</h3>
+  <p>From prototype through global deployment, Angular delivers the productivity and scalable
+    infrastructure that supports Google's largest applications.</p>
+
+  <h3>What is Angular?</h3>
+
+  <p>Angular is a platform that makes it easy to build applications with the web. Angular
+    combines declarative templates, dependency injection, end to end tooling, and integrated
+    best practices to solve development challenges. Angular empowers developers to build
+    applications that live on the web, mobile, or the desktop</p>
+
+  <h3>Architecture overview</h3>
+
+  <p>Angular is a platform and framework for building client applications in HTML and TypeScript.
+  Angular is itself written in TypeScript. It implements core and optional functionality as a
+  set of TypeScript libraries that you import into your apps.</p>
+
+  <p>The basic building blocks of an Angular application are NgModules, which provide a compilation
+  context for components. NgModules collect related code into functional sets; an Angular app is
+  defined by a set of NgModules. An app always has at least a root module that enables
+  bootstrapping, and typically has many more feature modules.</p>
+
+  <p>Components define views, which are sets of screen elements that Angular can choose among and
+  modify according to your program logic and data. Every app has at least a root component.</p>
+
+  <p>Components use services, which provide specific functionality not directly related to views.
+  Service providers can be injected into components as dependencies, making your code modular,
+  reusable, and efficient.</p>
+
+  <p>Both components and services are simply classes, with decorators that mark their type and
+  provide metadata that tells Angular how to use them.</p>
+
+  <p>The metadata for a component class associates it with a template that defines a view. A
+  template combines ordinary HTML with Angular directives and binding markup that allow Angular
+  to modify the HTML before rendering it for display.</p>
+
+  <p>The metadata for a service class provides the information Angular needs to make it available
+  to components through Dependency Injection (DI).</p>
+
+  <p>An app's components typically define many views, arranged hierarchically. Angular provides
+  the Router service to help you define navigation paths among views. The router provides
+  sophisticated in-browser navigational capabilities.</p>
 </mat-dialog-content>
-<mat-dialog-actions>
+<mat-dialog-actions align="end">
   <button mat-button mat-dialog-close>Cancel</button>
   <button mat-button [mat-dialog-close]="true" cdkFocusInitial>Install</button>
 </mat-dialog-actions>
diff --git a/src/assets/angular-material-examples/dialog-content/dialog-content-example.ts b/src/assets/angular-material-examples/dialog-content/dialog-content-example.ts
index 19698f21..85302e36 100755
--- a/src/assets/angular-material-examples/dialog-content/dialog-content-example.ts
+++ b/src/assets/angular-material-examples/dialog-content/dialog-content-example.ts
@@ -13,9 +13,7 @@ export class DialogContentExample {
   constructor(public dialog: MatDialog) {}
 
   openDialog() {
-    const dialogRef = this.dialog.open(DialogContentExampleDialog, {
-      height: '350px'
-    });
+    const dialogRef = this.dialog.open(DialogContentExampleDialog);
 
     dialogRef.afterClosed().subscribe(result => {
       console.log(`Dialog result: ${result}`);
diff --git a/src/assets/angular-material-examples/dialog-data/dialog-data-example.ts b/src/assets/angular-material-examples/dialog-data/dialog-data-example.ts
index 9f47c92d..e1499f16 100755
--- a/src/assets/angular-material-examples/dialog-data/dialog-data-example.ts
+++ b/src/assets/angular-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/assets/angular-material-examples/dialog-elements/dialog-elements-example.ts b/src/assets/angular-material-examples/dialog-elements/dialog-elements-example.ts
index b279523d..29183b25 100755
--- a/src/assets/angular-material-examples/dialog-elements/dialog-elements-example.ts
+++ b/src/assets/angular-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/assets/angular-material-examples/dialog-overview/dialog-overview-example.ts b/src/assets/angular-material-examples/dialog-overview/dialog-overview-example.ts
index b8d17263..29c60705 100755
--- a/src/assets/angular-material-examples/dialog-overview/dialog-overview-example.ts
+++ b/src/assets/angular-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/assets/angular-material-examples/expansion-expand-collapse-all/expansion-expand-collapse-all-example.html b/src/assets/angular-material-examples/expansion-expand-collapse-all/expansion-expand-collapse-all-example.html
index 497675cc..0231b80d 100755
--- a/src/assets/angular-material-examples/expansion-expand-collapse-all/expansion-expand-collapse-all-example.html
+++ b/src/assets/angular-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-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 placeholder="First name">
+    </mat-form-field>
 
-        <mat-form-field>
-            <input matInput type="number" min="1" placeholder="Age">
-        </mat-form-field>
+    <mat-form-field>
+      <input matInput type="number" min="1" placeholder="Age">
+    </mat-form-field>
 
-    </mat-expansion-panel>
+  </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-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-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-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/assets/angular-material-examples/expansion-expand-collapse-all/expansion-expand-collapse-all-example.ts b/src/assets/angular-material-examples/expansion-expand-collapse-all/expansion-expand-collapse-all-example.ts
index 580430b5..eb628cce 100755
--- a/src/assets/angular-material-examples/expansion-expand-collapse-all/expansion-expand-collapse-all-example.ts
+++ b/src/assets/angular-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/assets/angular-material-examples/expansion-overview/expansion-overview-example.ts b/src/assets/angular-material-examples/expansion-overview/expansion-overview-example.ts
index 30eb44b3..280dde34 100755
--- a/src/assets/angular-material-examples/expansion-overview/expansion-overview-example.ts
+++ b/src/assets/angular-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/assets/angular-material-examples/expansion-steps/expansion-steps-example.html b/src/assets/angular-material-examples/expansion-steps/expansion-steps-example.html
index 1a4880c2..c76cdf88 100755
--- a/src/assets/angular-material-examples/expansion-steps/expansion-steps-example.html
+++ b/src/assets/angular-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/assets/angular-material-examples/expansion-steps/expansion-steps-example.ts b/src/assets/angular-material-examples/expansion-steps/expansion-steps-example.ts
index e302175f..5dfa1d28 100755
--- a/src/assets/angular-material-examples/expansion-steps/expansion-steps-example.ts
+++ b/src/assets/angular-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/assets/angular-material-examples/focus-monitor-directives/focus-monitor-directives-example.ts b/src/assets/angular-material-examples/focus-monitor-directives/focus-monitor-directives-example.ts
index c13412a9..35ce0309 100755
--- a/src/assets/angular-material-examples/focus-monitor-directives/focus-monitor-directives-example.ts
+++ b/src/assets/angular-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/assets/angular-material-examples/focus-monitor-focus-via/focus-monitor-focus-via-example.ts b/src/assets/angular-material-examples/focus-monitor-focus-via/focus-monitor-focus-via-example.ts
index 6ad5dd51..78c52004 100755
--- a/src/assets/angular-material-examples/focus-monitor-focus-via/focus-monitor-focus-via-example.ts
+++ b/src/assets/angular-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/assets/angular-material-examples/focus-monitor-overview/focus-monitor-overview-example.ts b/src/assets/angular-material-examples/focus-monitor-overview/focus-monitor-overview-example.ts
index 4f0e8475..7e4abd64 100755
--- a/src/assets/angular-material-examples/focus-monitor-overview/focus-monitor-overview-example.ts
+++ b/src/assets/angular-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/assets/angular-material-examples/form-field-appearance/form-field-appearance-example.ts b/src/assets/angular-material-examples/form-field-appearance/form-field-appearance-example.ts
index 77f124fc..b2ed1ed3 100755
--- a/src/assets/angular-material-examples/form-field-appearance/form-field-appearance-example.ts
+++ b/src/assets/angular-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/assets/angular-material-examples/form-field-custom-control/form-field-custom-control-example.ts b/src/assets/angular-material-examples/form-field-custom-control/form-field-custom-control-example.ts
index 70b57b08..314611d7 100755
--- a/src/assets/angular-material-examples/form-field-custom-control/form-field-custom-control-example.ts
+++ b/src/assets/angular-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/assets/angular-material-examples/form-field-error/form-field-error-example.ts b/src/assets/angular-material-examples/form-field-error/form-field-error-example.ts
index ac867e71..042f9501 100755
--- a/src/assets/angular-material-examples/form-field-error/form-field-error-example.ts
+++ b/src/assets/angular-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/assets/angular-material-examples/form-field-hint/form-field-hint-example.ts b/src/assets/angular-material-examples/form-field-hint/form-field-hint-example.ts
index 1ae1b159..9bf6b602 100755
--- a/src/assets/angular-material-examples/form-field-hint/form-field-hint-example.ts
+++ b/src/assets/angular-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/assets/angular-material-examples/form-field-label/form-field-label-example.ts b/src/assets/angular-material-examples/form-field-label/form-field-label-example.ts
index 4ebb56e3..ee03367d 100755
--- a/src/assets/angular-material-examples/form-field-label/form-field-label-example.ts
+++ b/src/assets/angular-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/assets/angular-material-examples/form-field-overview/form-field-overview-example.ts b/src/assets/angular-material-examples/form-field-overview/form-field-overview-example.ts
index 25200209..4666e5ad 100755
--- a/src/assets/angular-material-examples/form-field-overview/form-field-overview-example.ts
+++ b/src/assets/angular-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/assets/angular-material-examples/form-field-prefix-suffix/form-field-prefix-suffix-example.ts b/src/assets/angular-material-examples/form-field-prefix-suffix/form-field-prefix-suffix-example.ts
index 16b24e7b..43597b2e 100755
--- a/src/assets/angular-material-examples/form-field-prefix-suffix/form-field-prefix-suffix-example.ts
+++ b/src/assets/angular-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/assets/angular-material-examples/form-field-theming/form-field-theming-example.ts b/src/assets/angular-material-examples/form-field-theming/form-field-theming-example.ts
index 1e27dbc4..101e27f0 100755
--- a/src/assets/angular-material-examples/form-field-theming/form-field-theming-example.ts
+++ b/src/assets/angular-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/assets/angular-material-examples/grid-list-dynamic/grid-list-dynamic-example.ts b/src/assets/angular-material-examples/grid-list-dynamic/grid-list-dynamic-example.ts
index 99b29dfe..e38d348d 100755
--- a/src/assets/angular-material-examples/grid-list-dynamic/grid-list-dynamic-example.ts
+++ b/src/assets/angular-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/assets/angular-material-examples/icon-overview/icon-overview-example.ts b/src/assets/angular-material-examples/icon-overview/icon-overview-example.ts
index c2106e33..f502ac6d 100755
--- a/src/assets/angular-material-examples/icon-overview/icon-overview-example.ts
+++ b/src/assets/angular-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/assets/angular-material-examples/input-clearable/input-clearable-example.html b/src/assets/angular-material-examples/input-clearable/input-clearable-example.html
index 4e1721a0..4a135e1d 100755
--- a/src/assets/angular-material-examples/input-clearable/input-clearable-example.html
+++ b/src/assets/angular-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/assets/angular-material-examples/list-sections/list-sections-example.ts b/src/assets/angular-material-examples/list-sections/list-sections-example.ts
index 63e7e4c6..f7ae6621 100755
--- a/src/assets/angular-material-examples/list-sections/list-sections-example.ts
+++ b/src/assets/angular-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/assets/angular-material-examples/list-selection/list-selection-example.ts b/src/assets/angular-material-examples/list-selection/list-selection-example.ts
index 644d3d8a..322463fb 100755
--- a/src/assets/angular-material-examples/list-selection/list-selection-example.ts
+++ b/src/assets/angular-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/assets/angular-material-examples/nested-menu/nested-menu-example.ts b/src/assets/angular-material-examples/nested-menu/nested-menu-example.ts
index d9d7b81e..4e4d9710 100755
--- a/src/assets/angular-material-examples/nested-menu/nested-menu-example.ts
+++ b/src/assets/angular-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/assets/angular-material-examples/paginator-configurable/paginator-configurable-example.ts b/src/assets/angular-material-examples/paginator-configurable/paginator-configurable-example.ts
index 3a19e138..10d102bb 100755
--- a/src/assets/angular-material-examples/paginator-configurable/paginator-configurable-example.ts
+++ b/src/assets/angular-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/assets/angular-material-examples/progress-bar-configurable/progress-bar-configurable-example.html b/src/assets/angular-material-examples/progress-bar-configurable/progress-bar-configurable-example.html
index bdde8c61..49c08020 100755
--- a/src/assets/angular-material-examples/progress-bar-configurable/progress-bar-configurable-example.html
+++ b/src/assets/angular-material-examples/progress-bar-configurable/progress-bar-configurable-example.html
@@ -35,11 +35,11 @@
       </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/assets/angular-material-examples/progress-spinner-configurable/progress-spinner-configurable-example.html b/src/assets/angular-material-examples/progress-spinner-configurable/progress-spinner-configurable-example.html
index 538321c8..4ff79176 100755
--- a/src/assets/angular-material-examples/progress-spinner-configurable/progress-spinner-configurable-example.html
+++ b/src/assets/angular-material-examples/progress-spinner-configurable/progress-spinner-configurable-example.html
@@ -29,7 +29,7 @@
       </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/assets/angular-material-examples/radio-ng-model/radio-ng-model-example.ts b/src/assets/angular-material-examples/radio-ng-model/radio-ng-model-example.ts
index 52fc5157..63791e23 100755
--- a/src/assets/angular-material-examples/radio-ng-model/radio-ng-model-example.ts
+++ b/src/assets/angular-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/assets/angular-material-examples/select-custom-trigger/select-custom-trigger-example.html b/src/assets/angular-material-examples/select-custom-trigger/select-custom-trigger-example.html
index b8d7fe7c..9c6f8960 100755
--- a/src/assets/angular-material-examples/select-custom-trigger/select-custom-trigger-example.html
+++ b/src/assets/angular-material-examples/select-custom-trigger/select-custom-trigger-example.html
@@ -3,7 +3,7 @@
     <mat-select-trigger>
       {{toppings.value ? toppings.value[0] : ''}}
       <span *ngIf="toppings.value?.length > 1" class="example-additional-selection">
-        (+{{toppings.value.length - 1}} others)
+        (+{{toppings.value.length - 1}} {{toppings.value?.length === 2 ? 'other' : 'others'}})
       </span>
     </mat-select-trigger>
     <mat-option *ngFor="let topping of toppingList" [value]="topping">{{topping}}</mat-option>
diff --git a/src/assets/angular-material-examples/select-custom-trigger/select-custom-trigger-example.ts b/src/assets/angular-material-examples/select-custom-trigger/select-custom-trigger-example.ts
index bc40ebd1..0d38a010 100755
--- a/src/assets/angular-material-examples/select-custom-trigger/select-custom-trigger-example.ts
+++ b/src/assets/angular-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/assets/angular-material-examples/select-form/select-form-example.ts b/src/assets/angular-material-examples/select-form/select-form-example.ts
index f3ad5713..aedf9673 100755
--- a/src/assets/angular-material-examples/select-form/select-form-example.ts
+++ b/src/assets/angular-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/assets/angular-material-examples/select-hint-error/select-hint-error-example.ts b/src/assets/angular-material-examples/select-hint-error/select-hint-error-example.ts
index 82fd4a19..f40d09b3 100755
--- a/src/assets/angular-material-examples/select-hint-error/select-hint-error-example.ts
+++ b/src/assets/angular-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/assets/angular-material-examples/select-multiple/select-multiple-example.ts b/src/assets/angular-material-examples/select-multiple/select-multiple-example.ts
index 7f58f4cb..c9db8399 100755
--- a/src/assets/angular-material-examples/select-multiple/select-multiple-example.ts
+++ b/src/assets/angular-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/assets/angular-material-examples/select-optgroup/select-optgroup-example.html b/src/assets/angular-material-examples/select-optgroup/select-optgroup-example.html
index 24859472..24674836 100755
--- a/src/assets/angular-material-examples/select-optgroup/select-optgroup-example.html
+++ b/src/assets/angular-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/assets/angular-material-examples/select-optgroup/select-optgroup-example.ts b/src/assets/angular-material-examples/select-optgroup/select-optgroup-example.ts
index 6113c69b..2624e8a5 100755
--- a/src/assets/angular-material-examples/select-optgroup/select-optgroup-example.ts
+++ b/src/assets/angular-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/assets/angular-material-examples/select-overview/select-overview-example.html b/src/assets/angular-material-examples/select-overview/select-overview-example.html
index f02b07a1..95459267 100755
--- a/src/assets/angular-material-examples/select-overview/select-overview-example.html
+++ b/src/assets/angular-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/assets/angular-material-examples/select-overview/select-overview-example.ts b/src/assets/angular-material-examples/select-overview/select-overview-example.ts
index 8bae60ba..3f306bd1 100755
--- a/src/assets/angular-material-examples/select-overview/select-overview-example.ts
+++ b/src/assets/angular-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/assets/angular-material-examples/select-panel-class/select-panel-class-example.ts b/src/assets/angular-material-examples/select-panel-class/select-panel-class-example.ts
index 712f75f4..b93fefb5 100755
--- a/src/assets/angular-material-examples/select-panel-class/select-panel-class-example.ts
+++ b/src/assets/angular-material-examples/select-panel-class/select-panel-class-example.ts
@@ -8,6 +8,8 @@ import {FormControl} from '@angular/forms';
   selector: 'select-panel-class-example',
   templateUrl: 'select-panel-class-example.html',
   styleUrls: ['select-panel-class-example.css'],
+  // Encapsulation has to be disabled in order for the
+  // component style to apply to the select panel.
   encapsulation: ViewEncapsulation.None,
 })
 export class SelectPanelClassExample {
diff --git a/src/assets/angular-material-examples/select-reset/select-reset-example.ts b/src/assets/angular-material-examples/select-reset/select-reset-example.ts
index e14587ed..a52b6e2a 100755
--- a/src/assets/angular-material-examples/select-reset/select-reset-example.ts
+++ b/src/assets/angular-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/assets/angular-material-examples/sidenav-drawer-overview/sidenav-drawer-overview-example.html b/src/assets/angular-material-examples/sidenav-drawer-overview/sidenav-drawer-overview-example.html
index 2dca0fd6..db557e10 100755
--- a/src/assets/angular-material-examples/sidenav-drawer-overview/sidenav-drawer-overview-example.html
+++ b/src/assets/angular-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/assets/angular-material-examples/sidenav-fixed/sidenav-fixed-example.html b/src/assets/angular-material-examples/sidenav-fixed/sidenav-fixed-example.html
index 53a74f82..dcc43afc 100755
--- a/src/assets/angular-material-examples/sidenav-fixed/sidenav-fixed-example.html
+++ b/src/assets/angular-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/assets/angular-material-examples/sidenav-fixed/sidenav-fixed-example.ts b/src/assets/angular-material-examples/sidenav-fixed/sidenav-fixed-example.ts
index 910987f4..695b9b7b 100755
--- a/src/assets/angular-material-examples/sidenav-fixed/sidenav-fixed-example.ts
+++ b/src/assets/angular-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/assets/angular-material-examples/sidenav-mode/sidenav-mode-example.ts b/src/assets/angular-material-examples/sidenav-mode/sidenav-mode-example.ts
index 790ba5d2..b1b01f1c 100755
--- a/src/assets/angular-material-examples/sidenav-mode/sidenav-mode-example.ts
+++ b/src/assets/angular-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/assets/angular-material-examples/sidenav-responsive/sidenav-responsive-example.ts b/src/assets/angular-material-examples/sidenav-responsive/sidenav-responsive-example.ts
index 9e84e9a4..da30404c 100755
--- a/src/assets/angular-material-examples/sidenav-responsive/sidenav-responsive-example.ts
+++ b/src/assets/angular-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/assets/angular-material-examples/slide-toggle-forms/slide-toggle-forms-example.html b/src/assets/angular-material-examples/slide-toggle-forms/slide-toggle-forms-example.html
index 3ce5f440..db205ffb 100755
--- a/src/assets/angular-material-examples/slide-toggle-forms/slide-toggle-forms-example.html
+++ b/src/assets/angular-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/assets/angular-material-examples/slide-toggle-forms/slide-toggle-forms-example.ts b/src/assets/angular-material-examples/slide-toggle-forms/slide-toggle-forms-example.ts
index 2636c474..d511f1f5 100755
--- a/src/assets/angular-material-examples/slide-toggle-forms/slide-toggle-forms-example.ts
+++ b/src/assets/angular-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/assets/angular-material-examples/slider-configurable/slider-configurable-example.ts b/src/assets/angular-material-examples/slider-configurable/slider-configurable-example.ts
index 80f20670..7b75621d 100755
--- a/src/assets/angular-material-examples/slider-configurable/slider-configurable-example.ts
+++ b/src/assets/angular-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/assets/angular-material-examples/snack-bar-component/snack-bar-component-example.ts b/src/assets/angular-material-examples/snack-bar-component/snack-bar-component-example.ts
index cf3fafdf..bd121c38 100755
--- a/src/assets/angular-material-examples/snack-bar-component/snack-bar-component-example.ts
+++ b/src/assets/angular-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/assets/angular-material-examples/sort-overview/sort-overview-example.ts b/src/assets/angular-material-examples/sort-overview/sort-overview-example.ts
index 58b19b39..4062c823 100755
--- a/src/assets/angular-material-examples/sort-overview/sort-overview-example.ts
+++ b/src/assets/angular-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/assets/angular-material-examples/stepper-editable/stepper-editable-example.html b/src/assets/angular-material-examples/stepper-editable/stepper-editable-example.html
index 05c22c5a..e9162fea 100755
--- a/src/assets/angular-material-examples/stepper-editable/stepper-editable-example.html
+++ b/src/assets/angular-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/assets/angular-material-examples/stepper-editable/stepper-editable-example.ts b/src/assets/angular-material-examples/stepper-editable/stepper-editable-example.ts
index c70b275c..d052b274 100755
--- a/src/assets/angular-material-examples/stepper-editable/stepper-editable-example.ts
+++ b/src/assets/angular-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/assets/angular-material-examples/stepper-optional/stepper-optional-example.html b/src/assets/angular-material-examples/stepper-optional/stepper-optional-example.html
index 004b3458..31c390bf 100755
--- a/src/assets/angular-material-examples/stepper-optional/stepper-optional-example.html
+++ b/src/assets/angular-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/assets/angular-material-examples/stepper-optional/stepper-optional-example.ts b/src/assets/angular-material-examples/stepper-optional/stepper-optional-example.ts
index 44935073..7096da95 100755
--- a/src/assets/angular-material-examples/stepper-optional/stepper-optional-example.ts
+++ b/src/assets/angular-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/assets/angular-material-examples/stepper-overview/stepper-overview-example.ts b/src/assets/angular-material-examples/stepper-overview/stepper-overview-example.ts
index cd2c1829..16690bbe 100755
--- a/src/assets/angular-material-examples/stepper-overview/stepper-overview-example.ts
+++ b/src/assets/angular-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/assets/angular-material-examples/stepper-vertical/stepper-vertical-example.ts b/src/assets/angular-material-examples/stepper-vertical/stepper-vertical-example.ts
index 13229872..26bc7486 100755
--- a/src/assets/angular-material-examples/stepper-vertical/stepper-vertical-example.ts
+++ b/src/assets/angular-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/assets/angular-material-examples/tab-group-dynamic/tab-group-dynamic-example.ts b/src/assets/angular-material-examples/tab-group-dynamic/tab-group-dynamic-example.ts
index ab5f3e8f..50e88c9e 100755
--- a/src/assets/angular-material-examples/tab-group-dynamic/tab-group-dynamic-example.ts
+++ b/src/assets/angular-material-examples/tab-group-dynamic/tab-group-dynamic-example.ts
@@ -2,7 +2,7 @@ import {Component} from '@angular/core';
 import {FormControl} from '@angular/forms';
 
 /**
- * @title Tag group with dynamically changing tabs
+ * @title Tab group with dynamically changing tabs
  */
 @Component({
   selector: 'tab-group-dynamic-example',
diff --git a/src/assets/angular-material-examples/tab-nav-bar-basic/tab-nav-bar-basic-example.html b/src/assets/angular-material-examples/tab-nav-bar-basic/tab-nav-bar-basic-example.html
index 86d05003..538f335c 100755
--- a/src/assets/angular-material-examples/tab-nav-bar-basic/tab-nav-bar-basic-example.html
+++ b/src/assets/angular-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/assets/angular-material-examples/table-basic-flex/table-basic-flex-example.ts b/src/assets/angular-material-examples/table-basic-flex/table-basic-flex-example.ts
index f75072d0..eb0066c4 100755
--- a/src/assets/angular-material-examples/table-basic-flex/table-basic-flex-example.ts
+++ b/src/assets/angular-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/assets/angular-material-examples/table-basic/table-basic-example.ts b/src/assets/angular-material-examples/table-basic/table-basic-example.ts
index 3042613e..517218a2 100755
--- a/src/assets/angular-material-examples/table-basic/table-basic-example.ts
+++ b/src/assets/angular-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/assets/angular-material-examples/table-dynamic-columns/table-dynamic-columns-example.html b/src/assets/angular-material-examples/table-dynamic-columns/table-dynamic-columns-example.html
index 0463410e..9d2fcac7 100755
--- a/src/assets/angular-material-examples/table-dynamic-columns/table-dynamic-columns-example.html
+++ b/src/assets/angular-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/assets/angular-material-examples/table-dynamic-columns/table-dynamic-columns-example.ts b/src/assets/angular-material-examples/table-dynamic-columns/table-dynamic-columns-example.ts
index 107226fc..4948c44a 100755
--- a/src/assets/angular-material-examples/table-dynamic-columns/table-dynamic-columns-example.ts
+++ b/src/assets/angular-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/assets/angular-material-examples/table-filtering/table-filtering-example.ts b/src/assets/angular-material-examples/table-filtering/table-filtering-example.ts
index 4b4800b1..e1b572b5 100755
--- a/src/assets/angular-material-examples/table-filtering/table-filtering-example.ts
+++ b/src/assets/angular-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/assets/angular-material-examples/table-footer-row/table-footer-row-example.ts b/src/assets/angular-material-examples/table-footer-row/table-footer-row-example.ts
index c4df488b..92227379 100755
--- a/src/assets/angular-material-examples/table-footer-row/table-footer-row-example.ts
+++ b/src/assets/angular-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/assets/angular-material-examples/table-http/table-http-example.html b/src/assets/angular-material-examples/table-http/table-http-example.html
index 49992857..acdc824d 100755
--- a/src/assets/angular-material-examples/table-http/table-http-example.html
+++ b/src/assets/angular-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/assets/angular-material-examples/table-http/table-http-example.ts b/src/assets/angular-material-examples/table-http/table-http-example.ts
index 9475078b..aeab6437 100755
--- a/src/assets/angular-material-examples/table-http/table-http-example.ts
+++ b/src/assets/angular-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/assets/angular-material-examples/table-multiple-header-footer/table-multiple-header-footer-example.ts b/src/assets/angular-material-examples/table-multiple-header-footer/table-multiple-header-footer-example.ts
index 1832eb4b..87c17bef 100755
--- a/src/assets/angular-material-examples/table-multiple-header-footer/table-multiple-header-footer-example.ts
+++ b/src/assets/angular-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/assets/angular-material-examples/table-overview/table-overview-example.ts b/src/assets/angular-material-examples/table-overview/table-overview-example.ts
index 9e58578d..62eec1ce 100755
--- a/src/assets/angular-material-examples/table-overview/table-overview-example.ts
+++ b/src/assets/angular-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/assets/angular-material-examples/table-pagination/table-pagination-example.ts b/src/assets/angular-material-examples/table-pagination/table-pagination-example.ts
index 6a4e03c5..e4cad373 100755
--- a/src/assets/angular-material-examples/table-pagination/table-pagination-example.ts
+++ b/src/assets/angular-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/assets/angular-material-examples/table-row-context/table-row-context-example.ts b/src/assets/angular-material-examples/table-row-context/table-row-context-example.ts
index 7799dd05..5c041552 100755
--- a/src/assets/angular-material-examples/table-row-context/table-row-context-example.ts
+++ b/src/assets/angular-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/assets/angular-material-examples/table-selection/table-selection-example.ts b/src/assets/angular-material-examples/table-selection/table-selection-example.ts
index cee88c81..15336737 100755
--- a/src/assets/angular-material-examples/table-selection/table-selection-example.ts
+++ b/src/assets/angular-material-examples/table-selection/table-selection-example.ts
@@ -1,34 +1,6 @@
+import {SelectionModel} from '@angular/cdk/collections';
 import {Component} from '@angular/core';
 import {MatTableDataSource} from '@angular/material';
-import {SelectionModel} from '@angular/cdk/collections';
-
-/**
- * @title Table with selection
- */
-@Component({
-  selector: 'table-selection-example',
-  styleUrls: ['table-selection-example.css'],
-  templateUrl: 'table-selection-example.html',
-})
-export class TableSelectionExample {
-  displayedColumns = ['select', 'position', 'name', 'weight', 'symbol'];
-  dataSource = new MatTableDataSource<PeriodicElement>(ELEMENT_DATA);
-  selection = new SelectionModel<PeriodicElement>(true, []);
-
-  /** Whether the number of selected elements matches the total number of rows. */
-  isAllSelected() {
-    const numSelected = this.selection.selected.length;
-    const numRows = this.dataSource.data.length;
-    return numSelected === numRows;
-  }
-
-  /** Selects all rows if they are not all selected; otherwise clear selection. */
-  masterToggle() {
-    this.isAllSelected() ?
-        this.selection.clear() :
-        this.dataSource.data.forEach(row => this.selection.select(row));
-  }
-}
 
 export interface PeriodicElement {
   name: string;
@@ -49,3 +21,31 @@ 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 selection
+ */
+@Component({
+  selector: 'table-selection-example',
+  styleUrls: ['table-selection-example.css'],
+  templateUrl: 'table-selection-example.html',
+})
+export class TableSelectionExample {
+  displayedColumns: string[] = ['select', 'position', 'name', 'weight', 'symbol'];
+  dataSource = new MatTableDataSource<PeriodicElement>(ELEMENT_DATA);
+  selection = new SelectionModel<PeriodicElement>(true, []);
+
+  /** Whether the number of selected elements matches the total number of rows. */
+  isAllSelected() {
+    const numSelected = this.selection.selected.length;
+    const numRows = this.dataSource.data.length;
+    return numSelected === numRows;
+  }
+
+  /** Selects all rows if they are not all selected; otherwise clear selection. */
+  masterToggle() {
+    this.isAllSelected() ?
+        this.selection.clear() :
+        this.dataSource.data.forEach(row => this.selection.select(row));
+  }
+}
diff --git a/src/assets/angular-material-examples/table-sorting/table-sorting-example.ts b/src/assets/angular-material-examples/table-sorting/table-sorting-example.ts
index 8878e744..cc992b0e 100755
--- a/src/assets/angular-material-examples/table-sorting/table-sorting-example.ts
+++ b/src/assets/angular-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/assets/angular-material-examples/table-sticky-footer/table-sticky-footer-example.html b/src/assets/angular-material-examples/table-sticky-footer/table-sticky-footer-example.html
index 7f4a2681..c8c75575 100755
--- a/src/assets/angular-material-examples/table-sticky-footer/table-sticky-footer-example.html
+++ b/src/assets/angular-material-examples/table-sticky-footer/table-sticky-footer-example.html
@@ -16,6 +16,6 @@
 
     <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
     <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-    <tr mat-footer-row *matFooterRowDef="displayedColumns sticky: true"></tr>
+    <tr mat-footer-row *matFooterRowDef="displayedColumns; sticky: true"></tr>
   </table>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/assets/angular-material-examples/tooltip-custom-class/tooltip-custom-class-example.ts b/src/assets/angular-material-examples/tooltip-custom-class/tooltip-custom-class-example.ts
index 51e7f754..62419465 100755
--- a/src/assets/angular-material-examples/tooltip-custom-class/tooltip-custom-class-example.ts
+++ b/src/assets/angular-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/assets/angular-material-examples/tooltip-position/tooltip-position-example.html b/src/assets/angular-material-examples/tooltip-position/tooltip-position-example.html
index f4b76551..444dbad7 100755
--- a/src/assets/angular-material-examples/tooltip-position/tooltip-position-example.html
+++ b/src/assets/angular-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/assets/angular-material-examples/tree-checklist/tree-checklist-example.ts b/src/assets/angular-material-examples/tree-checklist/tree-checklist-example.ts
index 5407d082..2f031869 100755
--- a/src/assets/angular-material-examples/tree-checklist/tree-checklist-example.ts
+++ b/src/assets/angular-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} 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': [
+  Groceries: {
+    'Almond Meal flour': null,
+    'Organic eggs': null,
+    'Protein Powder': null,
+    Fruits: {
+      Apple: null,
+      Berries: ['Blueberry', 'Raspberry'],
+      Orange: null
+    }
+  },
+  Reminders: [
     'Cook dinner',
     'Read the Material Design spec',
     'Upgrade Application to Angular'
-  ],
-  'Groceries': {
-    'Organic eggs': null,
-    'Protein Powder': null,
-    'Almond Meal flour': null,
-    'Fruits': {
-      'Apple': null,
-      'Orange': null,
-      'Berries': ['Blueberry', 'Raspberry']
-    }
-  }
+  ]
 };
 
 /**
@@ -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): TodoItemNode[] => 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/assets/angular-material-examples/tree-dynamic/tree-dynamic-example.ts b/src/assets/angular-material-examples/tree-dynamic/tree-dynamic-example.ts
index 7f9b4052..8f560382 100755
--- a/src/assets/angular-material-examples/tree-dynamic/tree-dynamic-example.ts
+++ b/src/assets/angular-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));
     }
   }
 
@@ -123,7 +120,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);
@@ -135,9 +131,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/assets/angular-material-examples/tree-flat-overview/tree-flat-overview-example.ts b/src/assets/angular-material-examples/tree-flat-overview/tree-flat-overview-example.ts
index ebdaf064..ba7a4dad 100755
--- a/src/assets/angular-material-examples/tree-flat-overview/tree-flat-overview-example.ts
+++ b/src/assets/angular-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/assets/angular-material-examples/tree-loadmore/tree-loadmore-example.ts b/src/assets/angular-material-examples/tree-loadmore/tree-loadmore-example.ts
index 559ca190..0c958a8a 100755
--- a/src/assets/angular-material-examples/tree-loadmore/tree-loadmore-example.ts
+++ b/src/assets/angular-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/assets/angular-material-examples/tree-nested-overview/tree-nested-overview-example.ts b/src/assets/angular-material-examples/tree-nested-overview/tree-nested-overview-example.ts
index bdc37e34..9fe9960e 100755
--- a/src/assets/angular-material-examples/tree-nested-overview/tree-nested-overview-example.ts
+++ b/src/assets/angular-material-examples/tree-nested-overview/tree-nested-overview-example.ts
@@ -1,7 +1,7 @@
 import {NestedTreeControl} from '@angular/cdk/tree';
 import {Component, Injectable} from '@angular/core';
 import {MatTreeNestedDataSource} from '@angular/material/tree';
-import {BehaviorSubject, of as observableOf} from 'rxjs';
+import {BehaviorSubject} from 'rxjs';
 
 /**
  * Json node data with nested structure. Each node has a filename and a value or a list of children
@@ -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) => node.children;
 }