Updated Angular Material element examples

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();
+  myControl = new FormControl();
-  options = ['One', 'Two', 'Three'];
+  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[] {
+  private _filter(value: string): string[] {
-    return this.options.filter(option => option.toLowerCase().indexOf(val.toLowerCase()) === 0);
+    const filterValue = value.toLowerCase();
-  }
 
+    return this.options.filter(option => option.toLowerCase().indexOf(filterValue) === 0);
+  }
 }

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 {
+export interface User {
-  constructor(public name: string) { }
+  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: User[] = [
-  options = [
+    {name: 'Mary'},
-    new User('Mary'),
+    {name: 'Shelley'},
-    new User('Shelley'),
+    {name: 'Igor'}
-    new User('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.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 = new FormControl();
-  myControl: FormControl = new FormControl();
+  options: string[] = ['One', 'Two', 'Three'];
-
-  options = [
-    '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[] {
+  private _filter(value: string): string[] {
-    return this.options.filter(option =>
+    const filterValue = value.toLowerCase();
-      option.toLowerCase().includes(val.toLowerCase()));
-  }
 
+    return this.options.filter(option => option.toLowerCase().includes(filterValue));
+  }
 }

src/assets/angular-material-examples/autocomplete-optgroup/autocomplete-optgroup-example.html

@@ -1,6 +1,6 @@
 <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">

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
  */
@@ -90,22 +96,17 @@ export class AutocompleteOptgroupExample implements OnInit {
     this.stateGroupOptions = this.stateForm.get('stateGroup')!.valueChanges
       .pipe(
         startWith(''),
-        map(val => this.filterGroup(val))
+        map(value => this._filterGroup(value))
       );
   }
 
-  filterGroup(val: string): StateGroup[] {
+  private _filterGroup(value: string): StateGroup[] {
-    if (val) {
+    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" />
+        <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 {
+export interface State {
-  constructor(public name: string, public population: string, public flag: string) { }
+  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;
+  stateCtrl = new FormControl();
-  filteredStates: Observable<any[]>;
+  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) {
+  private _filterStates(value: string): State[] {
-    return this.states.filter(state =>
+    const filterValue = value.toLowerCase();
-      state.name.toLowerCase().indexOf(name.toLowerCase()) === 0);
-  }
 
+    return this.states.filter(state => state.name.toLowerCase().indexOf(filterValue) === 0);
+  }
 }

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 = new FormControl();
-  myControl: FormControl = new FormControl();
+  options: string[] = ['One', 'Two', 'Three'];
-
-  options = [
-    '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 {}

src/assets/angular-material-examples/button-types/button-types-example.css

@@ -1,5 +1,4 @@
-.example-button-row {
+.button-row button,
-  display: flex;
+.button-row a {
-  align-items: center;
+  margin-right: 8px;
-  justify-content: space-around;
 }

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>

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;
+  constructor(
-  type: any;
+    public expandable: boolean, public filename: string, public level: number, public type: any) {}
-  level: number;
-  expandable: boolean;
 }
 
 /**
  * The file structure tree data in string. The data could be parsed into a Json object
  */
-const TREE_DATA = `
+const TREE_DATA = JSON.stringify({
-  {
+  Applications: {
-    "Documents": {
+    Calendar: 'app',
-      "angular": {
+    Chrome: 'app',
-        "src": {
+    Webstorm: 'app'
-          "core": "ts",
+  },
-          "compiler": "ts"
+  Documents: {
+    angular: {
+      src: {
+        compiler: 'ts',
+        core: 'ts'
       }
     },
-      "material2": {
+    material2: {
-        "src": {
+      src: {
-          "button": "ts",
+        button: 'ts',
-          "checkbox": "ts",
+        checkbox: 'ts',
-          "input": "ts"
+        input: 'ts'
       }
     }
   },
-    "Downloads": {
+  Downloads: {
-        "Tutorial": "html",
+    October: 'pdf',
-        "November": "pdf",
+    November: 'pdf',
-        "October": "pdf"
+    Tutorial: 'html'
   },
-    "Pictures": {
+  Pictures: {
-        "Sun": "png",
+    'Photo Booth Library': {
-        "Woods": "jpg",
+      Contents: 'dir',
-        "Photo Booth Library": {
+      Pictures: 'dir'
-          "Contents": "dir",
-          "Pictures": "dir"
-        }
     },
-    "Applications": {
+    Sun: 'png',
-        "Chrome": "app",
+    Woods: 'jpg'
-        "Calendar": "app",
-        "Webstorm": "app"
   }
-}`;
+});
 
 /**
  * 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[] {
+  buildFileTree(obj: object, level: number): FileNode[] {
-    let data: any[] = [];
+    return Object.keys(obj).reduce<FileNode[]>((accumulator, key) => {
-    for (let k in value) {
+      const value = obj[key];
-      let v = value[k];
+      const node = new FileNode();
-      let node = new FileNode();
+      node.filename = key;
-      node.filename = `${k}`;
+
-      if (v === null || v === undefined) {
+      if (value != null) {
-        // no action
+        if (typeof value === 'object') {
-      } else if (typeof v === 'object') {
+          node.children = this.buildFileTree(value, level + 1);
-        node.children = this.buildFileTree(v, level + 1);
         } else {
-        node.type = v;
+          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();
+    return new FileFlatNode(!!node.children, node.filename, level, node.type);
-    flatNode.filename = node.filename;
-    flatNode.type = node.type;
-    flatNode.level = level;
-    flatNode.expandable = !!node.children;
-    return flatNode;
   }
 
-  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[]> => {
+  private _getChildren = (node: FileNode): Observable<FileNode[]> => observableOf(node.children);
-    return observableOf(node.children);
-  }
-
-  hasChild = (_: number, _nodeData: FileFlatNode) => { return _nodeData.expandable; };
 }

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 = `
+const TREE_DATA = JSON.stringify({
-  {
+  Applications: {
-    "Documents": {
+    Calendar: 'app',
-      "angular": {
+    Chrome: 'app',
-        "src": {
+    Webstorm: 'app'
-          "core": "ts",
+  },
-          "compiler": "ts"
+  Documents: {
+    angular: {
+      src: {
+        compiler: 'ts',
+        core: 'ts'
       }
     },
-      "material2": {
+    material2: {
-        "src": {
+      src: {
-          "button": "ts",
+        button: 'ts',
-          "checkbox": "ts",
+        checkbox: 'ts',
-          "input": "ts"
+        input: 'ts'
       }
     }
   },
-    "Downloads": {
+  Downloads: {
-        "Tutorial": "html",
+    October: 'pdf',
-        "November": "pdf",
+    November: 'pdf',
-        "October": "pdf"
+    Tutorial: 'html'
   },
-    "Pictures": {
+  Pictures: {
-        "Sun": "png",
+    'Photo Booth Library': {
-        "Woods": "jpg",
+      Contents: 'dir',
-        "Photo Booth Library": {
+      Pictures: 'dir'
-          "Contents": "dir",
-          "Pictures": "dir"
-        }
     },
-    "Applications": {
+    Sun: 'png',
-        "Chrome": "app",
+    Woods: 'jpg'
-        "Calendar": "app",
-        "Webstorm": "app"
   }
-  }`;
+});
 
 /**
  * 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[] {
+  buildFileTree(obj: object, level: number): FileNode[] {
-    let data: any[] = [];
+    return Object.keys(obj).reduce<FileNode[]>((accumulator, key) => {
-    for (let k in value) {
+      const value = obj[key];
-      let v = value[k];
+      const node = new FileNode();
-      let node = new FileNode();
+      node.filename = key;
-      node.filename = `${k}`;
+
-      if (v === null || v === undefined) {
+      if (value != null) {
-        // no action
+        if (typeof value === 'object') {
-      } else if (typeof v === 'object') {
+          node.children = this.buildFileTree(value, level + 1);
-        node.children = this.buildFileTree(v, level + 1);
         } else {
-        node.type = v;
+          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,8 +16,7 @@
       [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">

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;
+  visible = true;
-  selectable: boolean = true;
+  selectable = true;
-  removable: boolean = true;
+  removable = true;
-  addOnBlur: boolean = false;
+  addOnBlur = false;
-
+  separatorKeysCodes: number[] = [ENTER, COMMA];
-  separatorKeysCodes = [ENTER, COMMA];
-
   fruitCtrl = new FormControl();
-
+  filteredFruits: Observable<string[]>;
-  filteredFruits: Observable<any[]>;
+  fruits: string[] = ['Lemon'];
-
+  allFruits: string[] = ['Apple', 'Lemon', 'Lime', 'Orange', 'Strawberry'];
-  fruits = [
-    'Lemon',
-  ];
-
-  allFruits = [
-    '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,27 +12,23 @@ 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;
+  visible = true;
-  selectable: boolean = true;
+  selectable = true;
-  removable: boolean = true;
+  removable = true;
-  addOnBlur: boolean = true;
+  addOnBlur = true;
-
+  readonly separatorKeysCodes: number[] = [ENTER, COMMA];
-  // Enter, comma
+  fruits: Fruit[] = [
-  separatorKeysCodes = [ENTER, COMMA];
-
-  fruits = [
     {name: 'Lemon'},
     {name: 'Lime'},
     {name: 'Apple'},
   ];
 
-
   add(event: MatChipInputEvent): void {
-    let input = event.input;
+    const input = event.input;
-    let value = event.value;
+    const value = event.value;
 
     // Add our fruit
     if ((value || '').trim()) {
@@ -41,8 +41,8 @@ export class ChipsInputExample {
     }
   }
 
-  remove(fruit: any): void {
+  remove(fruit: Fruit): void {
-    let index = this.fruits.indexOf(fruit);
+    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="primary" selected>Primary fish</mat-chip>
-  <mat-chip color="accent" selected="true">Accent 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,10 +15,8 @@ import {Component} from '@angular/core';
   styleUrls: ['chips-stacked-example.css'],
 })
 export class ChipsStackedExample {
-  color: string;
+  availableColors: ChipColor[] = [
-
+    {name: 'none', color: undefined},
-  availableColors = [
-    { name: 'none', color: '' },
     {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,
+  OnDestroy
-  ViewEncapsulation
 } 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>
+<mat-dialog-content class="mat-typography">
-  <h3>DEVELOP ACROSS ALL PLATFORMS</h3>
+  <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>
+  <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 
+    Workers and server-side rendering. Angular puts you in control over scalability. Meet huge
-    by building data models on RxJS, Immutable.js or another push-model.</p>
+    data requirements by building data models on RxJS, Immutable.js or another push-model.</p>
 
-  <h3>INCREDIBLE TOOLING</h3>
+  <h3>Incredible tooling</h3>
-  <p>Build features quickly with simple, declarative templates. Extend the template language with your own 
+  <p>Build features quickly with simple, declarative templates. Extend the template language with
-    components and use a wide array of existing components. Get immediate Angular-specific help and feedback 
+    your own components and use a wide array of existing components. Get immediate Angular-specific
-    with nearly every IDE and editor. All this comes together so you can focus on building amazing apps rather 
+    help and feedback with nearly every IDE and editor. All this comes together so you can focus
-    than trying to make the code work.</p>
+    on building amazing apps rather than trying to make the code work.</p>
 
-  <h3>LOVED BY MILLIONS</h3>
+  <h3>Loved by millions</h3>
-  <p>From prototype through global deployment, Angular delivers the productivity and scalable infrastructure 
+  <p>From prototype through global deployment, Angular delivers the productivity and scalable
-    that supports Google's largest applications.</p>
+    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, {
+    const dialogRef = this.dialog.open(DialogContentExampleDialog);
-      height: '350px'
-    });
 
     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-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,7 +22,7 @@ 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}
     });
@@ -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

@@ -2,7 +2,7 @@
   <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-accordion class="example-headers-align" multi>
   <mat-expansion-panel>
     <mat-expansion-panel-header>
       <mat-panel-title>
@@ -24,7 +24,7 @@
 
   </mat-expansion-panel>
 
-    <mat-expansion-panel [disabled]="true">
+  <mat-expansion-panel disabled>
     <mat-expansion-panel-header>
       <mat-panel-title>
         Destination
@@ -56,5 +56,4 @@
     </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);
+  elementOrigin = this.formatOrigin(null);
-  subtreeOrigin: string = 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);
+  elementOrigin = this.formatOrigin(null);
-  subtreeOrigin: string = 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;
+    const {value: {area, exchange, subscriber}} = this.parts;
-    return !n.area && !n.exchange && !n.subscriber;
+
+    return !area && !exchange && !subscriber;
   }
 
   get shouldLabelFloat() { return this.focused || !this.empty; }
 
-  id = `my-tel-input-${MyTelInput.nextId++}`;
-
-  describedBy = '';
-
   @Input()
-  get placeholder() { return this._placeholder; }
+  get placeholder(): string { return this._placeholder; }
-  set placeholder(plh) {
+  set placeholder(value: string) {
-    this._placeholder = plh;
+    this._placeholder = value;
     this.stateChanges.next();
   }
   private _placeholder: string;
 
   @Input()
-  get required() { return this._required; }
+  get required(): boolean { return this._required; }
-  set required(req) {
+  set required(value: boolean) {
-    this._required = coerceBooleanProperty(req);
+    this._required = coerceBooleanProperty(value);
     this.stateChanges.next();
   }
   private _required = false;
 
   @Input()
-  get disabled() { return this._disabled; }
+  get disabled(): boolean { return this._disabled; }
-  set disabled(dis) {
+  set disabled(value: boolean) {
-    this._disabled = coerceBooleanProperty(dis);
+    this._disabled = coerceBooleanProperty(value);
     this.stateChanges.next();
   }
   private _disabled = false;
 
   @Input()
   get value(): MyTel | null {
-    let n = this.parts.value;
+    const {value: {area, exchange, subscriber}} = this.parts;
-    if (n.area.length == 3 && n.exchange.length == 3 && n.subscriber.length == 4) {
+    if (area.length === 3 && exchange.length === 3 && subscriber.length === 4) {
-      return new MyTel(n.area, n.exchange, n.subscriber);
+      return new MyTel(area, exchange, subscriber);
     }
     return null;
   }
   set value(tel: MyTel | null) {
-    tel = tel || new MyTel('', '', '');
+    const {area, exchange, subscriber} = tel || new MyTel('', '', '');
-    this.parts.setValue({area: tel.area, exchange: tel.exchange, subscriber: tel.subscriber});
+    this.parts.setValue({area, exchange, subscriber});
     this.stateChanges.next();
   }
 
   constructor(fb: FormBuilder, private fm: FocusMonitor, private elRef: ElementRef) {
     this.parts = fb.group({
-      'area': '',
+      area: '',
-      'exchange': '',
+      exchange: '',
-      'subscriber': '',
+      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',
+      color: 'primary',
-      'fontSize': [16, Validators.min(10)],
+      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: string[] = ['Winter', 'Spring', 'Summer', 'Autumn'];
-  seasons = [
-    '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: Animal[] = [
-  animals = [
     {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: string[] = ['Extra cheese', 'Mushroom', 'Onion', 'Pepperoni', 'Sausage', 'Tomato'];
-  toppingList = ['Extra cheese', 'Mushroom', 'Onion', 'Pepperoni', 'Sausage', 'Tomato'];
 }

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,8 +20,7 @@ import {FormControl} from '@angular/forms';
 })
 export class SelectOptgroupExample {
   pokemonControl = new FormControl();
-
+  pokemonGroups: PokemonGroup[] = [
-  pokemonGroups = [
     {
       name: 'Grass',
       pokemon: [

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,
+      bottom: 0,
-      'top': 0,
+      fixed: false,
-      'bottom': 0,
+      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

@@ -4,7 +4,7 @@
 
 <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,7 +14,7 @@
 
 <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>

src/assets/angular-material-examples/slide-toggle-forms/slide-toggle-forms-example.ts

@@ -20,7 +20,7 @@ export class SlideToggleFormsExample {
     });
   }
 
-  onFormSubmit(formValue: any) {
+  onFormSubmit() {
-    alert(JSON.stringify(formValue, null, 2));
+    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) {
+  set tickInterval(value) {
-    this._tickInterval = Number(v);
+    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 = [
+  desserts: Dessert[] = [
-    {name: 'Frozen yogurt', calories: '159', fat: '6', carbs: '24', protein: '4'},
+    {name: 'Frozen yogurt', calories: 159, fat: 6, carbs: 24, protein: 4},
-    {name: 'Ice cream sandwich', calories: '237', fat: '9', carbs: '37', 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: 'Eclair', calories: 262, fat: 16, carbs: 24, protein: 6},
-    {name: 'Cupcake', calories: '305', fat: '4', carbs: '67', protein: '4'},
+    {name: 'Cupcake', calories: 305, fat: 4, carbs: 67, protein: 4},
-    {name: 'Gingerbread', calories: '356', fat: '16', carbs: '49', 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 'calories': return compare(a.calories, b.calories, isAsc);
-        case 'fat': return compare(+a.fat, +b.fat, isAsc);
+        case 'fat': return compare(a.fat, b.fat, isAsc);
-        case 'carbs': return compare(+a.carbs, +b.carbs, isAsc);
+        case 'carbs': return compare(a.carbs, b.carbs, isAsc);
-        case 'protein': return compare(+a.protein, +b.protein, 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,7 +12,7 @@ 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) {}
 

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,7 +12,7 @@ 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) {}
 

src/assets/angular-material-examples/stepper-overview/stepper-overview-example.ts

@@ -7,7 +7,7 @@ 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;

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/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'];
+  displayedColumns: string[] = ['name', 'weight', 'symbol', 'position'];
-  columnsToDisplay = this.definedColumns.slice();
+  columnsToDisplay: string[] = this.displayedColumns.slice();
   data: PeriodicElement[] = ELEMENT_DATA;
 
   addColumn() {
-    const randomColumn = Math.floor(Math.random() * this.definedColumns.length);
+    const randomColumn = Math.floor(Math.random() * this.displayedColumns.length);
-    this.columnsToDisplay.push(this.definedColumns[randomColumn]);
+    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},

src/assets/angular-material-examples/table-http/table-http-example.html

@@ -31,7 +31,7 @@
 
       <!-- 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>

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[] = [];
 

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

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[] = [];
+    const users = Array.from({length: 100}, (_, k) => createNewUser(k + 1));
-    for (let i = 1; i <= 100; i++) { users.push(createNewUser(i)); }
 
     // 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
+    this.dataSource.filter = filterValue.trim().toLowerCase();
-    filterValue = filterValue.toLowerCase(); // Datasource defaults to lowercase matches
+
-    this.dataSource.filter = filterValue;
     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;
-}

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;

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

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

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

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>