chore: enforce consistency in material-examples (#11539)

Author: rafaelss95

src/lib/tree/data-source/flat-data-source.ts

@@ -11,7 +11,6 @@ import {FlatTreeControl, TreeControl} from '@angular/cdk/tree';
 import {BehaviorSubject, merge, Observable} from 'rxjs';
 import {map, take} from 'rxjs/operators';
 
-
 /**
  * Tree flattener to convert a normal type of node to node with children & level information.
  * Transform nested nodes of type `T` to flattened nodes of type `F`.
@@ -90,7 +89,7 @@ export class MatTreeFlattener<T, F> {
     let currentExpand: boolean[] = [];
     currentExpand[0] = true;
 
-    nodes.forEach((node) => {
+    nodes.forEach(node => {
       let expand = true;
       for (let i = 0; i <= this.getLevel(node); i++) {
         expand = expand && currentExpand[i];
@@ -151,4 +150,3 @@ export class MatTreeFlatDataSource<T, F> extends DataSource<F> {
     // no op
   }
 }
-

src/material-examples/autocomplete-auto-active-first-option/autocomplete-auto-active-first-option-example.html

@@ -3,7 +3,7 @@
     <input type="text" placeholder="Pick one" aria-label="Number" matInput [formControl]="myControl" [matAutocomplete]="auto">
     <mat-autocomplete autoActiveFirstOption #auto="matAutocomplete">
       <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
-        {{ option }}
+        {{option}}
       </mat-option>
     </mat-autocomplete>
   </mat-form-field>

src/material-examples/autocomplete-auto-active-first-option/autocomplete-auto-active-first-option-example.ts

@@ -9,22 +9,23 @@ import {map, startWith} from 'rxjs/operators';
 @Component({
   selector: 'autocomplete-auto-active-first-option-example',
   templateUrl: 'autocomplete-auto-active-first-option-example.html',
-  styleUrls: ['autocomplete-auto-active-first-option-example.css']
+  styleUrls: ['autocomplete-auto-active-first-option-example.css'],
 })
 export class AutocompleteAutoActiveFirstOptionExample implements OnInit {
-  myControl: FormControl = new FormControl();
-  options = ['One', 'Two', 'Three'];
+  myControl = new FormControl();
+  options: string[] = ['One', 'Two', 'Three'];
   filteredOptions: Observable<string[]>;
 
   ngOnInit() {
     this.filteredOptions = this.myControl.valueChanges.pipe(
       startWith(''),
-      map(val => this.filter(val))
+      map(value => this._filter(value))
     );
   }
 
-  filter(val: string): string[] {
-    return this.options.filter(option => option.toLowerCase().indexOf(val.toLowerCase()) === 0);
-  }
+  private _filter(value: string): string[] {
+    const filterValue = value.toLowerCase();
 
+    return this.options.filter(option => option.toLowerCase().indexOf(filterValue) === 0);
+  }
 }

src/material-examples/autocomplete-display/autocomplete-display-example.html

@@ -3,7 +3,7 @@
     <input type="text" placeholder="Assignee" aria-label="Assignee" matInput [formControl]="myControl" [matAutocomplete]="auto">
     <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
       <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
-        {{ option.name }}
+        {{option.name}}
       </mat-option>
     </mat-autocomplete>
   </mat-form-field>

src/material-examples/autocomplete-display/autocomplete-display-example.ts

@@ -3,8 +3,8 @@ import {FormControl} from '@angular/forms';
 import {Observable} from 'rxjs';
 import {map, startWith} from 'rxjs/operators';
 
-export class User {
-  constructor(public name: string) { }
+export interface User {
+  name: string;
 }
 
 /**
@@ -13,36 +13,33 @@ 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() {
     this.filteredOptions = this.myControl.valueChanges
       .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/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/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/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/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/material-examples/autocomplete-overview/autocomplete-overview-example.css

@@ -7,3 +7,7 @@
 .example-full-width {
   width: 100%;
 }
+
+.example-option-img {
+  vertical-align: middle;
+}