Updated Angular Material element examples

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>

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);
+  }
 }

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>

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);
+  }
 }

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>

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));
+  }
 }

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>

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));
-  }
 }

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;
+}

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"

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);
+  }
 }

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>

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'];
 }

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 {}

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;
 }

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>

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[]> {

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[]> {

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;
 }

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'}}

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);
 }

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);
 }

src/assets/angular-material-examples/chips-autocomplete/chips-autocomplete-example.css

@@ -1,3 +1,3 @@
-.demo-chip-list {
+.example-chip-list {
   width: 100%;
 }

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>

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);
+  }
 }

src/assets/angular-material-examples/chips-input/chips-input-example.css

@@ -1,3 +1,3 @@
-.demo-chip-list {
+.example-chip-list {
   width: 100%;
 }

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>

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);

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>

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>

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'}
   ];
 }

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);
   }

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>

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

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>

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}`);

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) {}
 }

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 {}

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();

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>

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;

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;
 }

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

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;

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) {}
 

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,

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,

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 {}

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();
     });

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]);

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 {}

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;

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 {}

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;

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)],
     });
   }
 

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'},

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 {}

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>

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'),

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'];
 }

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 {}

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;

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>

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>

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'];
 }

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>

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'];
 }

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'}

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!'},

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'];
 }

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>

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'},
       ]
     }
   ];

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>

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'}

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 {

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',

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>

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

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
     });
   }
 

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));
 }

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

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>

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));
   }
 }

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;
 }

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 {}

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;
       }
     });

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>

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({

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>

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({

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({

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({

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',

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>

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;
+}

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;
+}

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>

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'},
-];

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();
+  }
+}

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},