diff --git a/src/lib/tree/data-source/flat-data-source.ts b/src/lib/tree/data-source/flat-data-source.ts index 03d3c8643ae..70da5222625 100644 --- a/src/lib/tree/data-source/flat-data-source.ts +++ b/src/lib/tree/data-source/flat-data-source.ts @@ -11,7 +11,6 @@ import {FlatTreeControl, TreeControl} from '@angular/cdk/tree'; import {BehaviorSubject, merge, Observable} from 'rxjs'; import {map, take} from 'rxjs/operators'; - /** * Tree flattener to convert a normal type of node to node with children & level information. * Transform nested nodes of type `T` to flattened nodes of type `F`. @@ -90,7 +89,7 @@ export class MatTreeFlattener { 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 extends DataSource { // no op } } - diff --git a/src/material-examples/autocomplete-auto-active-first-option/autocomplete-auto-active-first-option-example.html b/src/material-examples/autocomplete-auto-active-first-option/autocomplete-auto-active-first-option-example.html index 450909469d5..50dd982f68b 100644 --- a/src/material-examples/autocomplete-auto-active-first-option/autocomplete-auto-active-first-option-example.html +++ b/src/material-examples/autocomplete-auto-active-first-option/autocomplete-auto-active-first-option-example.html @@ -3,7 +3,7 @@ - {{ option }} + {{option}} diff --git a/src/material-examples/autocomplete-auto-active-first-option/autocomplete-auto-active-first-option-example.ts b/src/material-examples/autocomplete-auto-active-first-option/autocomplete-auto-active-first-option-example.ts index 3a5adb69bfe..f510c8d2474 100644 --- a/src/material-examples/autocomplete-auto-active-first-option/autocomplete-auto-active-first-option-example.ts +++ b/src/material-examples/autocomplete-auto-active-first-option/autocomplete-auto-active-first-option-example.ts @@ -9,22 +9,23 @@ import {map, startWith} from 'rxjs/operators'; @Component({ selector: 'autocomplete-auto-active-first-option-example', templateUrl: 'autocomplete-auto-active-first-option-example.html', - styleUrls: ['autocomplete-auto-active-first-option-example.css'] + styleUrls: ['autocomplete-auto-active-first-option-example.css'], }) export class AutocompleteAutoActiveFirstOptionExample implements OnInit { - myControl: FormControl = new FormControl(); - options = ['One', 'Two', 'Three']; + myControl = new FormControl(); + options: string[] = ['One', 'Two', 'Three']; filteredOptions: Observable; ngOnInit() { this.filteredOptions = this.myControl.valueChanges.pipe( startWith(''), - map(val => this.filter(val)) + map(value => this._filter(value)) ); } - filter(val: string): string[] { - return this.options.filter(option => option.toLowerCase().indexOf(val.toLowerCase()) === 0); - } + private _filter(value: string): string[] { + const filterValue = value.toLowerCase(); + return this.options.filter(option => option.toLowerCase().indexOf(filterValue) === 0); + } } diff --git a/src/material-examples/autocomplete-display/autocomplete-display-example.html b/src/material-examples/autocomplete-display/autocomplete-display-example.html index 6f7be4623bd..5daac573cf8 100644 --- a/src/material-examples/autocomplete-display/autocomplete-display-example.html +++ b/src/material-examples/autocomplete-display/autocomplete-display-example.html @@ -3,7 +3,7 @@ - {{ option.name }} + {{option.name}} diff --git a/src/material-examples/autocomplete-display/autocomplete-display-example.ts b/src/material-examples/autocomplete-display/autocomplete-display-example.ts index eb530ade4f8..adf9aa23b0a 100644 --- a/src/material-examples/autocomplete-display/autocomplete-display-example.ts +++ b/src/material-examples/autocomplete-display/autocomplete-display-example.ts @@ -3,8 +3,8 @@ import {FormControl} from '@angular/forms'; import {Observable} from 'rxjs'; import {map, startWith} from 'rxjs/operators'; -export class User { - constructor(public name: string) { } +export interface User { + name: string; } /** @@ -13,18 +13,15 @@ export class User { @Component({ selector: 'autocomplete-display-example', templateUrl: 'autocomplete-display-example.html', - styleUrls: ['autocomplete-display-example.css'] + styleUrls: ['autocomplete-display-example.css'], }) export class AutocompleteDisplayExample implements OnInit { - myControl = new FormControl(); - - options = [ - new User('Mary'), - new User('Shelley'), - new User('Igor') + options: User[] = [ + {name: 'Mary'}, + {name: 'Shelley'}, + {name: 'Igor'} ]; - filteredOptions: Observable; ngOnInit() { @@ -32,17 +29,17 @@ export class AutocompleteDisplayExample implements OnInit { .pipe( startWith(''), map(value => typeof value === 'string' ? value : value.name), - map(name => name ? this.filter(name) : this.options.slice()) + map(name => name ? this._filter(name) : this.options.slice()) ); } - filter(name: string): User[] { - return this.options.filter(option => - option.name.toLowerCase().indexOf(name.toLowerCase()) === 0); - } - displayFn(user?: User): string | undefined { return user ? user.name : undefined; } + private _filter(name: string): User[] { + const filterValue = name.toLowerCase(); + + return this.options.filter(option => option.name.toLowerCase().indexOf(filterValue) === 0); + } } diff --git a/src/material-examples/autocomplete-filter/autocomplete-filter-example.html b/src/material-examples/autocomplete-filter/autocomplete-filter-example.html index 3e685d80a23..3a5aefad2ce 100644 --- a/src/material-examples/autocomplete-filter/autocomplete-filter-example.html +++ b/src/material-examples/autocomplete-filter/autocomplete-filter-example.html @@ -3,7 +3,7 @@ - {{ option }} + {{option}} diff --git a/src/material-examples/autocomplete-filter/autocomplete-filter-example.ts b/src/material-examples/autocomplete-filter/autocomplete-filter-example.ts index 44f70a68960..6425a755beb 100644 --- a/src/material-examples/autocomplete-filter/autocomplete-filter-example.ts +++ b/src/material-examples/autocomplete-filter/autocomplete-filter-example.ts @@ -9,31 +9,24 @@ import {map, startWith} from 'rxjs/operators'; @Component({ selector: 'autocomplete-filter-example', templateUrl: 'autocomplete-filter-example.html', - styleUrls: ['autocomplete-filter-example.css'] + styleUrls: ['autocomplete-filter-example.css'], }) export class AutocompleteFilterExample implements OnInit { - - myControl: FormControl = new FormControl(); - - options = [ - 'One', - 'Two', - 'Three' - ]; - + myControl = new FormControl(); + options: string[] = ['One', 'Two', 'Three']; filteredOptions: Observable; ngOnInit() { this.filteredOptions = this.myControl.valueChanges .pipe( startWith(''), - map(val => this.filter(val)) + map(value => this._filter(value)) ); } - filter(val: string): string[] { - return this.options.filter(option => - option.toLowerCase().includes(val.toLowerCase())); - } + private _filter(value: string): string[] { + const filterValue = value.toLowerCase(); + return this.options.filter(option => option.toLowerCase().includes(filterValue)); + } } diff --git a/src/material-examples/autocomplete-optgroup/autocomplete-optgroup-example.html b/src/material-examples/autocomplete-optgroup/autocomplete-optgroup-example.html index 9fe26b2409f..0d9a4bf88c0 100644 --- a/src/material-examples/autocomplete-optgroup/autocomplete-optgroup-example.html +++ b/src/material-examples/autocomplete-optgroup/autocomplete-optgroup-example.html @@ -1,12 +1,12 @@
- + - {{ name }} + {{name}} - -
+ + diff --git a/src/material-examples/autocomplete-optgroup/autocomplete-optgroup-example.ts b/src/material-examples/autocomplete-optgroup/autocomplete-optgroup-example.ts index fd43d54b064..75e0e13cec2 100644 --- a/src/material-examples/autocomplete-optgroup/autocomplete-optgroup-example.ts +++ b/src/material-examples/autocomplete-optgroup/autocomplete-optgroup-example.ts @@ -1,5 +1,5 @@ import {Component, OnInit} from '@angular/core'; -import {FormGroup, FormBuilder} from '@angular/forms'; +import {FormBuilder, FormGroup} from '@angular/forms'; import {Observable} from 'rxjs'; import {startWith, map} from 'rxjs/operators'; @@ -8,6 +8,12 @@ export interface StateGroup { names: string[]; } +export const _filter = (opt: string[], value: string): string[] => { + const filterValue = value.toLowerCase(); + + return opt.filter(item => item.toLowerCase().indexOf(filterValue) === 0); +}; + /** * @title Option groups autocomplete */ @@ -84,28 +90,23 @@ export class AutocompleteOptgroupExample implements OnInit { stateGroupOptions: Observable; - constructor(private fb: FormBuilder) { } + constructor(private fb: FormBuilder) {} ngOnInit() { this.stateGroupOptions = this.stateForm.get('stateGroup')!.valueChanges .pipe( startWith(''), - map(val => this.filterGroup(val)) + map(value => this._filterGroup(value)) ); } - filterGroup(val: string): StateGroup[] { - if (val) { + private _filterGroup(value: string): StateGroup[] { + if (value) { return this.stateGroups - .map(group => ({ letter: group.letter, names: this._filter(group.names, val) })) + .map(group => ({letter: group.letter, names: _filter(group.names, value)})) .filter(group => group.names.length > 0); } return this.stateGroups; } - - private _filter(opt: string[], val: string) { - const filterValue = val.toLowerCase(); - return opt.filter(item => item.toLowerCase().startsWith(filterValue)); - } } diff --git a/src/material-examples/autocomplete-overview/autocomplete-overview-example.css b/src/material-examples/autocomplete-overview/autocomplete-overview-example.css index 08fa67536b1..ab4bf7bd3da 100644 --- a/src/material-examples/autocomplete-overview/autocomplete-overview-example.css +++ b/src/material-examples/autocomplete-overview/autocomplete-overview-example.css @@ -7,3 +7,7 @@ .example-full-width { width: 100%; } + +.example-option-img { + vertical-align: middle; +} diff --git a/src/material-examples/autocomplete-overview/autocomplete-overview-example.html b/src/material-examples/autocomplete-overview/autocomplete-overview-example.html index 9b6179e74bc..09ab07facdd 100644 --- a/src/material-examples/autocomplete-overview/autocomplete-overview-example.html +++ b/src/material-examples/autocomplete-overview/autocomplete-overview-example.html @@ -3,14 +3,14 @@ - - {{ state.name }} | + + {{state.name}} | Population: {{state.population}} -
+
; + stateCtrl = new FormControl(); + filteredStates: Observable; states: State[] = [ { @@ -48,17 +49,16 @@ export class AutocompleteOverviewExample { ]; constructor() { - this.stateCtrl = new FormControl(); this.filteredStates = this.stateCtrl.valueChanges .pipe( startWith(''), - map(state => state ? this.filterStates(state) : this.states.slice()) + map(state => state ? this._filterStates(state) : this.states.slice()) ); } - filterStates(name: string) { - return this.states.filter(state => - state.name.toLowerCase().indexOf(name.toLowerCase()) === 0); - } + private _filterStates(value: string): State[] { + const filterValue = value.toLowerCase(); + return this.states.filter(state => state.name.toLowerCase().indexOf(filterValue) === 0); + } } diff --git a/src/material-examples/autocomplete-simple/autocomplete-simple-example.html b/src/material-examples/autocomplete-simple/autocomplete-simple-example.html index 57a309431f8..cfd6bdf223e 100644 --- a/src/material-examples/autocomplete-simple/autocomplete-simple-example.html +++ b/src/material-examples/autocomplete-simple/autocomplete-simple-example.html @@ -3,7 +3,7 @@ - {{ option }} + {{option}} diff --git a/src/material-examples/autocomplete-simple/autocomplete-simple-example.ts b/src/material-examples/autocomplete-simple/autocomplete-simple-example.ts index c3f1bcb6dfd..94c673db9dc 100644 --- a/src/material-examples/autocomplete-simple/autocomplete-simple-example.ts +++ b/src/material-examples/autocomplete-simple/autocomplete-simple-example.ts @@ -7,16 +7,9 @@ import {FormControl} from '@angular/forms'; @Component({ selector: 'autocomplete-simple-example', templateUrl: 'autocomplete-simple-example.html', - styleUrls: ['autocomplete-simple-example.css'] + styleUrls: ['autocomplete-simple-example.css'], }) export class AutocompleteSimpleExample { - - myControl: FormControl = new FormControl(); - - options = [ - 'One', - 'Two', - 'Three' - ]; - + myControl = new FormControl(); + options: string[] = ['One', 'Two', 'Three']; } diff --git a/src/material-examples/badge-overview/badge-overview-example.ts b/src/material-examples/badge-overview/badge-overview-example.ts index 30ba295e290..ff0a597bd90 100644 --- a/src/material-examples/badge-overview/badge-overview-example.ts +++ b/src/material-examples/badge-overview/badge-overview-example.ts @@ -1,12 +1,11 @@ import {Component} from '@angular/core'; - /** * @title Badge overview */ @Component({ selector: 'badge-overview-example', templateUrl: 'badge-overview-example.html', - styleUrls: ['badge-overview-example.css'] + styleUrls: ['badge-overview-example.css'], }) -export class BadgeOverviewExample { } +export class BadgeOverviewExample {} diff --git a/src/material-examples/cdk-table-basic-flex/cdk-table-basic-flex-example.ts b/src/material-examples/cdk-table-basic-flex/cdk-table-basic-flex-example.ts index b117d4dee4e..6e255f9a1d3 100644 --- a/src/material-examples/cdk-table-basic-flex/cdk-table-basic-flex-example.ts +++ b/src/material-examples/cdk-table-basic-flex/cdk-table-basic-flex-example.ts @@ -2,24 +2,11 @@ import {DataSource} from '@angular/cdk/collections'; import {Component} from '@angular/core'; import {BehaviorSubject, Observable} from 'rxjs'; -/** - * @title Basic use of `` (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 `` (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 { /** Stream of data that is provided to the table. */ - data: BehaviorSubject = new BehaviorSubject(ELEMENT_DATA); + data = new BehaviorSubject(ELEMENT_DATA); /** Connect function called by the table to retrieve one stream containing the data to render. */ connect(): Observable { diff --git a/src/material-examples/cdk-table-basic/cdk-table-basic-example.ts b/src/material-examples/cdk-table-basic/cdk-table-basic-example.ts index 57ca60603a9..c1f06e45f48 100644 --- a/src/material-examples/cdk-table-basic/cdk-table-basic-example.ts +++ b/src/material-examples/cdk-table-basic/cdk-table-basic-example.ts @@ -2,19 +2,6 @@ import {DataSource} from '@angular/cdk/collections'; import {Component} from '@angular/core'; import {BehaviorSubject, Observable} from 'rxjs'; -/** - * @title Basic CDK data-table - */ -@Component({ - selector: 'cdk-table-basic-example', - styleUrls: ['cdk-table-basic-example.css'], - templateUrl: 'cdk-table-basic-example.html', -}) -export class CdkTableBasicExample { - displayedColumns = ['position', 'name', 'weight', 'symbol']; - dataSource = new ExampleDataSource(); -} - export interface PeriodicElement { name: string; position: number; @@ -35,6 +22,19 @@ const ELEMENT_DATA: PeriodicElement[] = [ {position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne'}, ]; +/** + * @title Basic CDK data-table + */ +@Component({ + selector: 'cdk-table-basic-example', + styleUrls: ['cdk-table-basic-example.css'], + templateUrl: 'cdk-table-basic-example.html', +}) +export class CdkTableBasicExample { + displayedColumns: string[] = ['position', 'name', 'weight', 'symbol']; + dataSource = new ExampleDataSource(); +} + /** * Data source to provide what data should be rendered in the table. Note that the data source * can retrieve its data in any way. In this case, the data source is provided a reference @@ -44,7 +44,7 @@ const ELEMENT_DATA: PeriodicElement[] = [ */ export class ExampleDataSource extends DataSource { /** Stream of data that is provided to the table. */ - data: BehaviorSubject = new BehaviorSubject(ELEMENT_DATA); + data = new BehaviorSubject(ELEMENT_DATA); /** Connect function called by the table to retrieve one stream containing the data to render. */ connect(): Observable { diff --git a/src/material-examples/cdk-tree-flat/cdk-tree-flat-example.css b/src/material-examples/cdk-tree-flat/cdk-tree-flat-example.css index 775f480239d..a88255f0d95 100644 --- a/src/material-examples/cdk-tree-flat/cdk-tree-flat-example.css +++ b/src/material-examples/cdk-tree-flat/cdk-tree-flat-example.css @@ -1,4 +1,4 @@ -.demo-tree-node { +.example-tree-node { display: flex; align-items: center; } diff --git a/src/material-examples/cdk-tree-flat/cdk-tree-flat-example.html b/src/material-examples/cdk-tree-flat/cdk-tree-flat-example.html index f6389208bab..1ad37095938 100644 --- a/src/material-examples/cdk-tree-flat/cdk-tree-flat-example.html +++ b/src/material-examples/cdk-tree-flat/cdk-tree-flat-example.html @@ -1,9 +1,9 @@ - + {{node.filename}}: {{node.type}} - + `, - encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, }) export class ExampleHeader implements OnDestroy { @@ -73,13 +70,13 @@ export class ExampleHeader implements OnDestroy { } previousClicked(mode: 'month' | 'year') { - this.calendar.activeDate = mode == 'month' ? + this.calendar.activeDate = mode === 'month' ? this.dateAdapter.addCalendarMonths(this.calendar.activeDate, -1) : this.dateAdapter.addCalendarYears(this.calendar.activeDate, -1); } nextClicked(mode: 'month' | 'year') { - this.calendar.activeDate = mode == 'month' ? + this.calendar.activeDate = mode === 'month' ? this.dateAdapter.addCalendarMonths(this.calendar.activeDate, 1) : this.dateAdapter.addCalendarYears(this.calendar.activeDate, 1); } diff --git a/src/material-examples/datepicker-touch/datepicker-touch-example.html b/src/material-examples/datepicker-touch/datepicker-touch-example.html index 7cec1f8e330..70a7e61e264 100644 --- a/src/material-examples/datepicker-touch/datepicker-touch-example.html +++ b/src/material-examples/datepicker-touch/datepicker-touch-example.html @@ -1,5 +1,5 @@ - + diff --git a/src/material-examples/datepicker-views-selection/datepicker-views-selection-example.ts b/src/material-examples/datepicker-views-selection/datepicker-views-selection-example.ts index 6a233667342..d37580087ec 100644 --- a/src/material-examples/datepicker-views-selection/datepicker-views-selection-example.ts +++ b/src/material-examples/datepicker-views-selection/datepicker-views-selection-example.ts @@ -1,4 +1,4 @@ -import {Component, ViewEncapsulation} from '@angular/core'; +import {Component} from '@angular/core'; import {FormControl} from '@angular/forms'; import {MomentDateAdapter} from '@angular/material-moment-adapter'; import {DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE} from '@angular/material/core'; @@ -33,7 +33,6 @@ export const MY_FORMATS = { selector: 'datepicker-views-selection-example', templateUrl: 'datepicker-views-selection-example.html', styleUrls: ['datepicker-views-selection-example.css'], - encapsulation: ViewEncapsulation.None, providers: [ // `MomentDateAdapter` can be automatically provided by importing `MomentDateModule` in your // application's root module. We provide it at the component level here, due to limitations of diff --git a/src/material-examples/dialog-data/dialog-data-example.ts b/src/material-examples/dialog-data/dialog-data-example.ts index 9f47c92d7cb..e1499f16479 100644 --- a/src/material-examples/dialog-data/dialog-data-example.ts +++ b/src/material-examples/dialog-data/dialog-data-example.ts @@ -1,13 +1,17 @@ import {Component, Inject} from '@angular/core'; import {MatDialog, MAT_DIALOG_DATA} from '@angular/material'; +export interface DialogData { + animal: 'panda' | 'unicorn' | 'lion'; +} + /** * @title Injecting data when opening a dialog */ @Component({ selector: 'dialog-data-example', templateUrl: 'dialog-data-example.html', - styleUrls: ['dialog-data-example.css'] + styleUrls: ['dialog-data-example.css'], }) export class DialogDataExample { constructor(public dialog: MatDialog) {} @@ -26,5 +30,5 @@ export class DialogDataExample { templateUrl: 'dialog-data-example-dialog.html', }) export class DialogDataExampleDialog { - constructor(@Inject(MAT_DIALOG_DATA) public data: any) {} + constructor(@Inject(MAT_DIALOG_DATA) public data: DialogData) {} } diff --git a/src/material-examples/dialog-elements/dialog-elements-example.ts b/src/material-examples/dialog-elements/dialog-elements-example.ts index b279523d54d..29183b2584f 100644 --- a/src/material-examples/dialog-elements/dialog-elements-example.ts +++ b/src/material-examples/dialog-elements/dialog-elements-example.ts @@ -10,7 +10,7 @@ import {MatDialog} from '@angular/material'; styleUrls: ['dialog-elements-example.css'], }) export class DialogElementsExample { - constructor(public dialog: MatDialog) { } + constructor(public dialog: MatDialog) {} openDialog() { this.dialog.open(DialogElementsExampleDialog); @@ -22,4 +22,4 @@ export class DialogElementsExample { selector: 'dialog-elements-example-dialog', templateUrl: 'dialog-elements-example-dialog.html', }) -export class DialogElementsExampleDialog { } +export class DialogElementsExampleDialog {} diff --git a/src/material-examples/dialog-overview/dialog-overview-example.ts b/src/material-examples/dialog-overview/dialog-overview-example.ts index b8d172633da..29c60705fab 100644 --- a/src/material-examples/dialog-overview/dialog-overview-example.ts +++ b/src/material-examples/dialog-overview/dialog-overview-example.ts @@ -1,6 +1,11 @@ import {Component, Inject} from '@angular/core'; import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material'; +export interface DialogData { + animal: string; + name: string; +} + /** * @title Dialog Overview */ @@ -17,9 +22,9 @@ export class DialogOverviewExample { constructor(public dialog: MatDialog) {} openDialog(): void { - let dialogRef = this.dialog.open(DialogOverviewExampleDialog, { + const dialogRef = this.dialog.open(DialogOverviewExampleDialog, { width: '250px', - data: { name: this.name, animal: this.animal } + data: {name: this.name, animal: this.animal} }); dialogRef.afterClosed().subscribe(result => { @@ -38,7 +43,7 @@ export class DialogOverviewExampleDialog { constructor( public dialogRef: MatDialogRef, - @Inject(MAT_DIALOG_DATA) public data: any) { } + @Inject(MAT_DIALOG_DATA) public data: DialogData) {} onNoClick(): void { this.dialogRef.close(); diff --git a/src/material-examples/expansion-expand-collapse-all/expansion-expand-collapse-all-example.html b/src/material-examples/expansion-expand-collapse-all/expansion-expand-collapse-all-example.html index 497675ccd94..0231b80d874 100644 --- a/src/material-examples/expansion-expand-collapse-all/expansion-expand-collapse-all-example.html +++ b/src/material-examples/expansion-expand-collapse-all/expansion-expand-collapse-all-example.html @@ -1,60 +1,59 @@
- - + +
- - - - - Personal data - - - Type your name and age - account_circle - - + + + + + Personal data + + + Type your name and age + account_circle + + - - - + + + - - - + + + - + - - - - Destination - - - Type the country name - map - - + + + + Destination + + + Type the country name + map + + - - - - + + + + - - - - Day of the trip - - - Inform the date you wish to travel - date_range - - - - - - - - + + + + Day of the trip + + + Inform the date you wish to travel + date_range + + + + + + + diff --git a/src/material-examples/expansion-expand-collapse-all/expansion-expand-collapse-all-example.ts b/src/material-examples/expansion-expand-collapse-all/expansion-expand-collapse-all-example.ts index 580430b52c0..eb628ccefca 100644 --- a/src/material-examples/expansion-expand-collapse-all/expansion-expand-collapse-all-example.ts +++ b/src/material-examples/expansion-expand-collapse-all/expansion-expand-collapse-all-example.ts @@ -7,7 +7,7 @@ import {MatAccordion} from '@angular/material'; @Component({ selector: 'expansion-toggle-all-example', templateUrl: 'expansion-expand-collapse-all-example.html', - styleUrls: ['expansion-expand-collapse-all-example.css'] + styleUrls: ['expansion-expand-collapse-all-example.css'], }) export class ExpansionExpandCollapseAllExample { @ViewChild(MatAccordion) accordion: MatAccordion; diff --git a/src/material-examples/expansion-overview/expansion-overview-example.ts b/src/material-examples/expansion-overview/expansion-overview-example.ts index 30eb44b3aef..280dde34544 100644 --- a/src/material-examples/expansion-overview/expansion-overview-example.ts +++ b/src/material-examples/expansion-overview/expansion-overview-example.ts @@ -9,5 +9,5 @@ import {Component} from '@angular/core'; styleUrls: ['expansion-overview-example.css'], }) export class ExpansionOverviewExample { - panelOpenState: boolean = false; + panelOpenState = false; } diff --git a/src/material-examples/expansion-steps/expansion-steps-example.html b/src/material-examples/expansion-steps/expansion-steps-example.html index 1a4880c2cdc..c76cdf88fe9 100644 --- a/src/material-examples/expansion-steps/expansion-steps-example.html +++ b/src/material-examples/expansion-steps/expansion-steps-example.html @@ -1,5 +1,5 @@ - + Personal data @@ -23,7 +23,7 @@ - + Destination @@ -44,7 +44,7 @@ - + Day of the trip diff --git a/src/material-examples/expansion-steps/expansion-steps-example.ts b/src/material-examples/expansion-steps/expansion-steps-example.ts index e302175fa2a..5dfa1d28e38 100644 --- a/src/material-examples/expansion-steps/expansion-steps-example.ts +++ b/src/material-examples/expansion-steps/expansion-steps-example.ts @@ -6,7 +6,7 @@ import {Component} from '@angular/core'; @Component({ selector: 'expansion-steps-example', templateUrl: 'expansion-steps-example.html', - styleUrls: ['expansion-steps-example.css'] + styleUrls: ['expansion-steps-example.css'], }) export class ExpansionStepsExample { step = 0; diff --git a/src/material-examples/focus-monitor-directives/focus-monitor-directives-example.ts b/src/material-examples/focus-monitor-directives/focus-monitor-directives-example.ts index c13412a97cf..35ce0309f18 100644 --- a/src/material-examples/focus-monitor-directives/focus-monitor-directives-example.ts +++ b/src/material-examples/focus-monitor-directives/focus-monitor-directives-example.ts @@ -8,8 +8,8 @@ import {ChangeDetectorRef, Component, NgZone} from '@angular/core'; styleUrls: ['focus-monitor-directives-example.css'] }) export class FocusMonitorDirectivesExample { - elementOrigin: string = this.formatOrigin(null); - subtreeOrigin: string = this.formatOrigin(null); + elementOrigin = this.formatOrigin(null); + subtreeOrigin = this.formatOrigin(null); constructor(private ngZone: NgZone, private cdr: ChangeDetectorRef) {} diff --git a/src/material-examples/focus-monitor-focus-via/focus-monitor-focus-via-example.ts b/src/material-examples/focus-monitor-focus-via/focus-monitor-focus-via-example.ts index 6ad5dd51177..78c520045b0 100644 --- a/src/material-examples/focus-monitor-focus-via/focus-monitor-focus-via-example.ts +++ b/src/material-examples/focus-monitor-focus-via/focus-monitor-focus-via-example.ts @@ -18,7 +18,7 @@ import { export class FocusMonitorFocusViaExample implements OnDestroy, OnInit { @ViewChild('monitored') monitoredEl: ElementRef; - origin: string = this.formatOrigin(null); + origin = this.formatOrigin(null); constructor(public focusMonitor: FocusMonitor, private cdr: ChangeDetectorRef, diff --git a/src/material-examples/focus-monitor-overview/focus-monitor-overview-example.ts b/src/material-examples/focus-monitor-overview/focus-monitor-overview-example.ts index 4f0e8475f64..7e4abd64864 100644 --- a/src/material-examples/focus-monitor-overview/focus-monitor-overview-example.ts +++ b/src/material-examples/focus-monitor-overview/focus-monitor-overview-example.ts @@ -19,8 +19,8 @@ export class FocusMonitorOverviewExample implements OnDestroy, OnInit { @ViewChild('element') element: ElementRef; @ViewChild('subtree') subtree: ElementRef; - elementOrigin: string = this.formatOrigin(null); - subtreeOrigin: string = this.formatOrigin(null); + elementOrigin = this.formatOrigin(null); + subtreeOrigin = this.formatOrigin(null); constructor(private focusMonitor: FocusMonitor, private cdr: ChangeDetectorRef, diff --git a/src/material-examples/form-field-appearance/form-field-appearance-example.ts b/src/material-examples/form-field-appearance/form-field-appearance-example.ts index 77f124fcd90..b2ed1ed3a86 100644 --- a/src/material-examples/form-field-appearance/form-field-appearance-example.ts +++ b/src/material-examples/form-field-appearance/form-field-appearance-example.ts @@ -4,6 +4,6 @@ import {Component} from '@angular/core'; @Component({ selector: 'form-field-appearance-example', templateUrl: 'form-field-appearance-example.html', - styleUrls: ['form-field-appearance-example.css'] + styleUrls: ['form-field-appearance-example.css'], }) export class FormFieldAppearanceExample {} diff --git a/src/material-examples/form-field-custom-control/form-field-custom-control-example.ts b/src/material-examples/form-field-custom-control/form-field-custom-control-example.ts index 70b57b0822a..314611d7733 100644 --- a/src/material-examples/form-field-custom-control/form-field-custom-control-example.ts +++ b/src/material-examples/form-field-custom-control/form-field-custom-control-example.ts @@ -5,7 +5,6 @@ import {FormBuilder, FormGroup} from '@angular/forms'; import {MatFormFieldControl} from '@angular/material'; import {Subject} from 'rxjs'; - /** Data structure for holding telephone number. */ export class MyTel { constructor(public area: string, public exchange: string, public subscriber: string) {} @@ -28,74 +27,68 @@ export class MyTelInput implements MatFormFieldControl, OnDestroy { static nextId = 0; parts: FormGroup; - stateChanges = new Subject(); - focused = false; - ngControl = null; - errorState = false; - controlType = 'my-tel-input'; + id = `my-tel-input-${MyTelInput.nextId++}`; + describedBy = ''; get empty() { - let n = this.parts.value; - return !n.area && !n.exchange && !n.subscriber; + const {value: {area, exchange, subscriber}} = this.parts; + + return !area && !exchange && !subscriber; } get shouldLabelFloat() { return this.focused || !this.empty; } - id = `my-tel-input-${MyTelInput.nextId++}`; - - describedBy = ''; - @Input() - get placeholder() { return this._placeholder; } - set placeholder(plh) { - this._placeholder = plh; + get placeholder(): string { return this._placeholder; } + set placeholder(value: string) { + this._placeholder = value; this.stateChanges.next(); } private _placeholder: string; @Input() - get required() { return this._required; } - set required(req) { - this._required = coerceBooleanProperty(req); + get required(): boolean { return this._required; } + set required(value: boolean) { + this._required = coerceBooleanProperty(value); this.stateChanges.next(); } private _required = false; @Input() - get disabled() { return this._disabled; } - set disabled(dis) { - this._disabled = coerceBooleanProperty(dis); + get disabled(): boolean { return this._disabled; } + set disabled(value: boolean) { + this._disabled = coerceBooleanProperty(value); this.stateChanges.next(); } private _disabled = false; @Input() get value(): MyTel | null { - let n = this.parts.value; - if (n.area.length == 3 && n.exchange.length == 3 && n.subscriber.length == 4) { - return new MyTel(n.area, n.exchange, n.subscriber); + const {value: {area, exchange, subscriber}} = this.parts; + if (area.length === 3 && exchange.length === 3 && subscriber.length === 4) { + return new MyTel(area, exchange, subscriber); } return null; } set value(tel: MyTel | null) { - tel = tel || new MyTel('', '', ''); - this.parts.setValue({area: tel.area, exchange: tel.exchange, subscriber: tel.subscriber}); + const {area, exchange, subscriber} = tel || new MyTel('', '', ''); + this.parts.setValue({area, exchange, subscriber}); this.stateChanges.next(); } constructor(fb: FormBuilder, private fm: FocusMonitor, private elRef: ElementRef) { this.parts = fb.group({ - 'area': '', - 'exchange': '', - 'subscriber': '', + area: '', + exchange: '', + subscriber: '', }); - fm.monitor(elRef.nativeElement, true).subscribe((origin) => { + fm.monitor(elRef.nativeElement, true).subscribe(origin => { this.focused = !!origin; this.stateChanges.next(); }); diff --git a/src/material-examples/form-field-error/form-field-error-example.ts b/src/material-examples/form-field-error/form-field-error-example.ts index ac867e7157f..042f95019e9 100644 --- a/src/material-examples/form-field-error/form-field-error-example.ts +++ b/src/material-examples/form-field-error/form-field-error-example.ts @@ -5,7 +5,7 @@ import {FormControl, Validators} from '@angular/forms'; @Component({ selector: 'form-field-error-example', templateUrl: 'form-field-error-example.html', - styleUrls: ['form-field-error-example.css'] + styleUrls: ['form-field-error-example.css'], }) export class FormFieldErrorExample { email = new FormControl('', [Validators.required, Validators.email]); diff --git a/src/material-examples/form-field-hint/form-field-hint-example.ts b/src/material-examples/form-field-hint/form-field-hint-example.ts index 1ae1b159368..9bf6b602692 100644 --- a/src/material-examples/form-field-hint/form-field-hint-example.ts +++ b/src/material-examples/form-field-hint/form-field-hint-example.ts @@ -4,6 +4,6 @@ import {Component} from '@angular/core'; @Component({ selector: 'form-field-hint-example', templateUrl: 'form-field-hint-example.html', - styleUrls: ['form-field-hint-example.css'] + styleUrls: ['form-field-hint-example.css'], }) export class FormFieldHintExample {} diff --git a/src/material-examples/form-field-label/form-field-label-example.ts b/src/material-examples/form-field-label/form-field-label-example.ts index 4ebb56e3090..ee03367d79b 100644 --- a/src/material-examples/form-field-label/form-field-label-example.ts +++ b/src/material-examples/form-field-label/form-field-label-example.ts @@ -5,7 +5,7 @@ import {FormBuilder, FormGroup} from '@angular/forms'; @Component({ selector: 'form-field-label-example', templateUrl: 'form-field-label-example.html', - styleUrls: ['form-field-label-example.css'] + styleUrls: ['form-field-label-example.css'], }) export class FormFieldLabelExample { options: FormGroup; diff --git a/src/material-examples/form-field-overview/form-field-overview-example.ts b/src/material-examples/form-field-overview/form-field-overview-example.ts index 25200209782..4666e5add6b 100644 --- a/src/material-examples/form-field-overview/form-field-overview-example.ts +++ b/src/material-examples/form-field-overview/form-field-overview-example.ts @@ -4,6 +4,6 @@ import {Component} from '@angular/core'; @Component({ selector: 'form-field-overview-example', templateUrl: 'form-field-overview-example.html', - styleUrls: ['form-field-overview-example.css'] + styleUrls: ['form-field-overview-example.css'], }) export class FormFieldOverviewExample {} diff --git a/src/material-examples/form-field-prefix-suffix/form-field-prefix-suffix-example.ts b/src/material-examples/form-field-prefix-suffix/form-field-prefix-suffix-example.ts index 16b24e7b45e..43597b2e5aa 100644 --- a/src/material-examples/form-field-prefix-suffix/form-field-prefix-suffix-example.ts +++ b/src/material-examples/form-field-prefix-suffix/form-field-prefix-suffix-example.ts @@ -4,7 +4,7 @@ import {Component} from '@angular/core'; @Component({ selector: 'form-field-prefix-suffix-example', templateUrl: 'form-field-prefix-suffix-example.html', - styleUrls: ['form-field-prefix-suffix-example.css'] + styleUrls: ['form-field-prefix-suffix-example.css'], }) export class FormFieldPrefixSuffixExample { hide = true; diff --git a/src/material-examples/form-field-theming/form-field-theming-example.ts b/src/material-examples/form-field-theming/form-field-theming-example.ts index 1e27dbc40b2..101e27f003d 100644 --- a/src/material-examples/form-field-theming/form-field-theming-example.ts +++ b/src/material-examples/form-field-theming/form-field-theming-example.ts @@ -5,15 +5,15 @@ import {FormBuilder, FormGroup, Validators} from '@angular/forms'; @Component({ selector: 'form-field-theming-example', templateUrl: 'form-field-theming-example.html', - styleUrls: ['form-field-theming-example.css'] + styleUrls: ['form-field-theming-example.css'], }) export class FormFieldThemingExample { options: FormGroup; constructor(fb: FormBuilder) { this.options = fb.group({ - 'color': 'primary', - 'fontSize': [16, Validators.min(10)], + color: 'primary', + fontSize: [16, Validators.min(10)], }); } diff --git a/src/material-examples/grid-list-dynamic/grid-list-dynamic-example.ts b/src/material-examples/grid-list-dynamic/grid-list-dynamic-example.ts index 99b29dfe8a7..e38d348d4a0 100644 --- a/src/material-examples/grid-list-dynamic/grid-list-dynamic-example.ts +++ b/src/material-examples/grid-list-dynamic/grid-list-dynamic-example.ts @@ -1,5 +1,12 @@ import {Component} from '@angular/core'; +export interface Tile { + color: string; + cols: number; + rows: number; + text: string; +} + /** * @title Dynamic grid-list */ @@ -9,7 +16,7 @@ import {Component} from '@angular/core'; styleUrls: ['grid-list-dynamic-example.css'], }) export class GridListDynamicExample { - tiles = [ + tiles: Tile[] = [ {text: 'One', cols: 3, rows: 1, color: 'lightblue'}, {text: 'Two', cols: 1, rows: 2, color: 'lightgreen'}, {text: 'Three', cols: 1, rows: 1, color: 'lightpink'}, diff --git a/src/material-examples/icon-overview/icon-overview-example.ts b/src/material-examples/icon-overview/icon-overview-example.ts index c2106e33f9d..f502ac6d3b1 100644 --- a/src/material-examples/icon-overview/icon-overview-example.ts +++ b/src/material-examples/icon-overview/icon-overview-example.ts @@ -6,6 +6,6 @@ import {Component} from '@angular/core'; @Component({ selector: 'icon-overview-example', templateUrl: 'icon-overview-example.html', - styleUrls: ['icon-overview-example.css'] + styleUrls: ['icon-overview-example.css'], }) export class IconOverviewExample {} diff --git a/src/material-examples/input-clearable/input-clearable-example.html b/src/material-examples/input-clearable/input-clearable-example.html index 4e1721a0f44..4a135e1d60f 100644 --- a/src/material-examples/input-clearable/input-clearable-example.html +++ b/src/material-examples/input-clearable/input-clearable-example.html @@ -1,5 +1,5 @@ - + diff --git a/src/material-examples/list-sections/list-sections-example.ts b/src/material-examples/list-sections/list-sections-example.ts index 63e7e4c6142..f7ae6621d33 100644 --- a/src/material-examples/list-sections/list-sections-example.ts +++ b/src/material-examples/list-sections/list-sections-example.ts @@ -1,5 +1,10 @@ import {Component} from '@angular/core'; +export interface Section { + name: string; + updated: Date; +} + /** * @title List with sections */ @@ -9,7 +14,7 @@ import {Component} from '@angular/core'; templateUrl: 'list-sections-example.html', }) export class ListSectionsExample { - folders = [ + folders: Section[] = [ { name: 'Photos', updated: new Date('1/1/16'), @@ -23,7 +28,7 @@ export class ListSectionsExample { updated: new Date('1/28/16'), } ]; - notes = [ + notes: Section[] = [ { name: 'Vacation Itinerary', updated: new Date('2/20/16'), diff --git a/src/material-examples/list-selection/list-selection-example.ts b/src/material-examples/list-selection/list-selection-example.ts index 644d3d8a570..322463fb5c8 100644 --- a/src/material-examples/list-selection/list-selection-example.ts +++ b/src/material-examples/list-selection/list-selection-example.ts @@ -9,5 +9,5 @@ import {Component} from '@angular/core'; templateUrl: 'list-selection-example.html', }) export class ListSelectionExample { - typesOfShoes = ['Boots', 'Clogs', 'Loafers', 'Moccasins', 'Sneakers']; + typesOfShoes: string[] = ['Boots', 'Clogs', 'Loafers', 'Moccasins', 'Sneakers']; } diff --git a/src/material-examples/nested-menu/nested-menu-example.ts b/src/material-examples/nested-menu/nested-menu-example.ts index d9d7b81eb31..4e4d9710b9d 100644 --- a/src/material-examples/nested-menu/nested-menu-example.ts +++ b/src/material-examples/nested-menu/nested-menu-example.ts @@ -6,6 +6,6 @@ import {Component} from '@angular/core'; @Component({ selector: 'nested-menu-example', templateUrl: 'nested-menu-example.html', - styleUrls: ['nested-menu-example.css'] + styleUrls: ['nested-menu-example.css'], }) export class NestedMenuExample {} diff --git a/src/material-examples/paginator-configurable/paginator-configurable-example.ts b/src/material-examples/paginator-configurable/paginator-configurable-example.ts index 3a19e1385e0..10d102bbdd4 100644 --- a/src/material-examples/paginator-configurable/paginator-configurable-example.ts +++ b/src/material-examples/paginator-configurable/paginator-configurable-example.ts @@ -13,7 +13,7 @@ export class PaginatorConfigurableExample { // MatPaginator Inputs length = 100; pageSize = 10; - pageSizeOptions = [5, 10, 25, 100]; + pageSizeOptions: number[] = [5, 10, 25, 100]; // MatPaginator Output pageEvent: PageEvent; diff --git a/src/material-examples/progress-bar-configurable/progress-bar-configurable-example.html b/src/material-examples/progress-bar-configurable/progress-bar-configurable-example.html index bdde8c6126a..49c08020fde 100644 --- a/src/material-examples/progress-bar-configurable/progress-bar-configurable-example.html +++ b/src/material-examples/progress-bar-configurable/progress-bar-configurable-example.html @@ -35,11 +35,11 @@ -
+
-
+
diff --git a/src/material-examples/progress-spinner-configurable/progress-spinner-configurable-example.html b/src/material-examples/progress-spinner-configurable/progress-spinner-configurable-example.html index 538321c8193..4ff79176cbc 100644 --- a/src/material-examples/progress-spinner-configurable/progress-spinner-configurable-example.html +++ b/src/material-examples/progress-spinner-configurable/progress-spinner-configurable-example.html @@ -29,7 +29,7 @@
-
+
diff --git a/src/material-examples/radio-ng-model/radio-ng-model-example.ts b/src/material-examples/radio-ng-model/radio-ng-model-example.ts index 52fc51572cf..63791e23161 100644 --- a/src/material-examples/radio-ng-model/radio-ng-model-example.ts +++ b/src/material-examples/radio-ng-model/radio-ng-model-example.ts @@ -10,11 +10,5 @@ import {Component} from '@angular/core'; }) export class RadioNgModelExample { favoriteSeason: string; - - seasons = [ - 'Winter', - 'Spring', - 'Summer', - 'Autumn', - ]; + seasons: string[] = ['Winter', 'Spring', 'Summer', 'Autumn']; } diff --git a/src/material-examples/select-custom-trigger/select-custom-trigger-example.ts b/src/material-examples/select-custom-trigger/select-custom-trigger-example.ts index bc40ebd1bb9..0d38a010053 100644 --- a/src/material-examples/select-custom-trigger/select-custom-trigger-example.ts +++ b/src/material-examples/select-custom-trigger/select-custom-trigger-example.ts @@ -10,5 +10,5 @@ import {FormControl} from '@angular/forms'; export class SelectCustomTriggerExample { toppings = new FormControl(); - toppingList = ['Extra cheese', 'Mushroom', 'Onion', 'Pepperoni', 'Sausage', 'Tomato']; + toppingList: string[] = ['Extra cheese', 'Mushroom', 'Onion', 'Pepperoni', 'Sausage', 'Tomato']; } diff --git a/src/material-examples/select-form/select-form-example.ts b/src/material-examples/select-form/select-form-example.ts index f3ad571314a..aedf9673289 100644 --- a/src/material-examples/select-form/select-form-example.ts +++ b/src/material-examples/select-form/select-form-example.ts @@ -1,5 +1,10 @@ import {Component} from '@angular/core'; +export interface Food { + value: string; + viewValue: string; +} + /** * @title Select in a form */ @@ -11,7 +16,7 @@ import {Component} from '@angular/core'; export class SelectFormExample { selectedValue: string; - foods = [ + foods: Food[] = [ {value: 'steak-0', viewValue: 'Steak'}, {value: 'pizza-1', viewValue: 'Pizza'}, {value: 'tacos-2', viewValue: 'Tacos'} diff --git a/src/material-examples/select-hint-error/select-hint-error-example.ts b/src/material-examples/select-hint-error/select-hint-error-example.ts index 82fd4a193be..f40d09b3d9f 100644 --- a/src/material-examples/select-hint-error/select-hint-error-example.ts +++ b/src/material-examples/select-hint-error/select-hint-error-example.ts @@ -1,6 +1,11 @@ import {Component} from '@angular/core'; import {FormControl, Validators} from '@angular/forms'; +export interface Animal { + name: string; + sound: string; +} + /** @title Select with form field features */ @Component({ selector: 'select-hint-error-example', @@ -9,8 +14,7 @@ import {FormControl, Validators} from '@angular/forms'; }) export class SelectHintErrorExample { animalControl = new FormControl('', [Validators.required]); - - animals = [ + animals: Animal[] = [ {name: 'Dog', sound: 'Woof!'}, {name: 'Cat', sound: 'Meow!'}, {name: 'Cow', sound: 'Moo!'}, diff --git a/src/material-examples/select-multiple/select-multiple-example.ts b/src/material-examples/select-multiple/select-multiple-example.ts index 7f58f4cbe78..c9db8399eb4 100644 --- a/src/material-examples/select-multiple/select-multiple-example.ts +++ b/src/material-examples/select-multiple/select-multiple-example.ts @@ -9,6 +9,5 @@ import {FormControl} from '@angular/forms'; }) export class SelectMultipleExample { toppings = new FormControl(); - - toppingList = ['Extra cheese', 'Mushroom', 'Onion', 'Pepperoni', 'Sausage', 'Tomato']; + toppingList: string[] = ['Extra cheese', 'Mushroom', 'Onion', 'Pepperoni', 'Sausage', 'Tomato']; } diff --git a/src/material-examples/select-optgroup/select-optgroup-example.html b/src/material-examples/select-optgroup/select-optgroup-example.html index 24859472aa6..2467483619c 100644 --- a/src/material-examples/select-optgroup/select-optgroup-example.html +++ b/src/material-examples/select-optgroup/select-optgroup-example.html @@ -4,7 +4,7 @@ - {{ pokemon.viewValue }} + {{pokemon.viewValue}} diff --git a/src/material-examples/select-optgroup/select-optgroup-example.ts b/src/material-examples/select-optgroup/select-optgroup-example.ts index 6113c69b4d5..2624e8a5643 100644 --- a/src/material-examples/select-optgroup/select-optgroup-example.ts +++ b/src/material-examples/select-optgroup/select-optgroup-example.ts @@ -1,6 +1,17 @@ import {Component} from '@angular/core'; import {FormControl} from '@angular/forms'; +export interface Pokemon { + value: string; + viewValue: string; +} + +export interface PokemonGroup { + disabled?: boolean; + name: string; + pokemon: Pokemon[]; +} + /** @title Select with option groups */ @Component({ selector: 'select-optgroup-example', @@ -9,38 +20,37 @@ import {FormControl} from '@angular/forms'; }) export class SelectOptgroupExample { pokemonControl = new FormControl(); - - pokemonGroups = [ + pokemonGroups: PokemonGroup[] = [ { name: 'Grass', pokemon: [ - { value: 'bulbasaur-0', viewValue: 'Bulbasaur' }, - { value: 'oddish-1', viewValue: 'Oddish' }, - { value: 'bellsprout-2', viewValue: 'Bellsprout' } + {value: 'bulbasaur-0', viewValue: 'Bulbasaur'}, + {value: 'oddish-1', viewValue: 'Oddish'}, + {value: 'bellsprout-2', viewValue: 'Bellsprout'} ] }, { name: 'Water', pokemon: [ - { value: 'squirtle-3', viewValue: 'Squirtle' }, - { value: 'psyduck-4', viewValue: 'Psyduck' }, - { value: 'horsea-5', viewValue: 'Horsea' } + {value: 'squirtle-3', viewValue: 'Squirtle'}, + {value: 'psyduck-4', viewValue: 'Psyduck'}, + {value: 'horsea-5', viewValue: 'Horsea'} ] }, { name: 'Fire', disabled: true, pokemon: [ - { value: 'charmander-6', viewValue: 'Charmander' }, - { value: 'vulpix-7', viewValue: 'Vulpix' }, - { value: 'flareon-8', viewValue: 'Flareon' } + {value: 'charmander-6', viewValue: 'Charmander'}, + {value: 'vulpix-7', viewValue: 'Vulpix'}, + {value: 'flareon-8', viewValue: 'Flareon'} ] }, { name: 'Psychic', pokemon: [ - { value: 'mew-9', viewValue: 'Mew' }, - { value: 'mewtwo-10', viewValue: 'Mewtwo' }, + {value: 'mew-9', viewValue: 'Mew'}, + {value: 'mewtwo-10', viewValue: 'Mewtwo'}, ] } ]; diff --git a/src/material-examples/select-overview/select-overview-example.html b/src/material-examples/select-overview/select-overview-example.html index f02b07a123a..95459267599 100644 --- a/src/material-examples/select-overview/select-overview-example.html +++ b/src/material-examples/select-overview/select-overview-example.html @@ -1,7 +1,7 @@ - {{ food.viewValue }} + {{food.viewValue}} diff --git a/src/material-examples/select-overview/select-overview-example.ts b/src/material-examples/select-overview/select-overview-example.ts index 8bae60ba829..3f306bd1a44 100644 --- a/src/material-examples/select-overview/select-overview-example.ts +++ b/src/material-examples/select-overview/select-overview-example.ts @@ -1,5 +1,10 @@ import {Component} from '@angular/core'; +export interface Food { + value: string; + viewValue: string; +} + /** * @title Basic select */ @@ -9,7 +14,7 @@ import {Component} from '@angular/core'; styleUrls: ['select-overview-example.css'], }) export class SelectOverviewExample { - foods = [ + foods: Food[] = [ {value: 'steak-0', viewValue: 'Steak'}, {value: 'pizza-1', viewValue: 'Pizza'}, {value: 'tacos-2', viewValue: 'Tacos'} diff --git a/src/material-examples/select-panel-class/select-panel-class-example.ts b/src/material-examples/select-panel-class/select-panel-class-example.ts index 712f75f49b5..eb848aa8fd9 100644 --- a/src/material-examples/select-panel-class/select-panel-class-example.ts +++ b/src/material-examples/select-panel-class/select-panel-class-example.ts @@ -1,4 +1,4 @@ -import {Component, ViewEncapsulation} from '@angular/core'; +import {Component} from '@angular/core'; import {FormControl} from '@angular/forms'; /** @@ -8,7 +8,6 @@ import {FormControl} from '@angular/forms'; selector: 'select-panel-class-example', templateUrl: 'select-panel-class-example.html', styleUrls: ['select-panel-class-example.css'], - encapsulation: ViewEncapsulation.None, }) export class SelectPanelClassExample { panelColor = new FormControl('red'); diff --git a/src/material-examples/select-reset/select-reset-example.ts b/src/material-examples/select-reset/select-reset-example.ts index e14587ed456..a52b6e2ad75 100644 --- a/src/material-examples/select-reset/select-reset-example.ts +++ b/src/material-examples/select-reset/select-reset-example.ts @@ -7,7 +7,7 @@ import {Component} from '@angular/core'; styleUrls: ['select-reset-example.css'], }) export class SelectResetExample { - states = [ + states: string[] = [ 'Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', diff --git a/src/material-examples/sidenav-drawer-overview/sidenav-drawer-overview-example.html b/src/material-examples/sidenav-drawer-overview/sidenav-drawer-overview-example.html index 2dca0fd6723..db557e1060e 100644 --- a/src/material-examples/sidenav-drawer-overview/sidenav-drawer-overview-example.html +++ b/src/material-examples/sidenav-drawer-overview/sidenav-drawer-overview-example.html @@ -1,4 +1,4 @@ - Drawer content + Drawer content Main content diff --git a/src/material-examples/sidenav-fixed/sidenav-fixed-example.html b/src/material-examples/sidenav-fixed/sidenav-fixed-example.html index 53a74f824f8..dcc43afcd56 100644 --- a/src/material-examples/sidenav-fixed/sidenav-fixed-example.html +++ b/src/material-examples/sidenav-fixed/sidenav-fixed-example.html @@ -2,7 +2,7 @@ Header - {{options.value.fixed ? 'Fixed' : 'Non-fixed'}} Sidenav diff --git a/src/material-examples/sidenav-fixed/sidenav-fixed-example.ts b/src/material-examples/sidenav-fixed/sidenav-fixed-example.ts index 910987f44e1..695b9b7b70e 100644 --- a/src/material-examples/sidenav-fixed/sidenav-fixed-example.ts +++ b/src/material-examples/sidenav-fixed/sidenav-fixed-example.ts @@ -12,9 +12,9 @@ export class SidenavFixedExample { constructor(fb: FormBuilder) { this.options = fb.group({ - 'fixed': false, - 'top': 0, - 'bottom': 0, + bottom: 0, + fixed: false, + top: 0 }); } diff --git a/src/material-examples/sidenav-mode/sidenav-mode-example.ts b/src/material-examples/sidenav-mode/sidenav-mode-example.ts index 790ba5d2641..b1b01f1c44d 100644 --- a/src/material-examples/sidenav-mode/sidenav-mode-example.ts +++ b/src/material-examples/sidenav-mode/sidenav-mode-example.ts @@ -9,6 +9,5 @@ import {FormControl} from '@angular/forms'; }) export class SidenavModeExample { mode = new FormControl('over'); - shouldRun = [/(^|\.)plnkr\.co$/, /(^|\.)stackblitz\.io$/].some(h => h.test(window.location.host)); } diff --git a/src/material-examples/sidenav-responsive/sidenav-responsive-example.ts b/src/material-examples/sidenav-responsive/sidenav-responsive-example.ts index 9e84e9a4b89..da30404cb6b 100644 --- a/src/material-examples/sidenav-responsive/sidenav-responsive-example.ts +++ b/src/material-examples/sidenav-responsive/sidenav-responsive-example.ts @@ -10,9 +10,9 @@ import {ChangeDetectorRef, Component, OnDestroy} from '@angular/core'; export class SidenavResponsiveExample implements OnDestroy { mobileQuery: MediaQueryList; - fillerNav = Array(50).fill(0).map((_, i) => `Nav Item ${i + 1}`); + fillerNav = Array.from({length: 50}, (_, i) => `Nav Item ${i + 1}`); - fillerContent = Array(50).fill(0).map(() => + fillerContent = Array.from({length: 50}, () => `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in diff --git a/src/material-examples/slide-toggle-forms/slide-toggle-forms-example.html b/src/material-examples/slide-toggle-forms/slide-toggle-forms-example.html index 3ce5f440b73..db205ffb3bc 100644 --- a/src/material-examples/slide-toggle-forms/slide-toggle-forms-example.html +++ b/src/material-examples/slide-toggle-forms/slide-toggle-forms-example.html @@ -1,10 +1,10 @@

Slide Toggle using a simple NgModel.

-Slide Toggle Checked: {{ isChecked }} +Slide Toggle Checked: {{isChecked}}

Slide Toggle inside of a Template-driven form

-
+ Enable Wifi Accept Terms of Service @@ -14,12 +14,12 @@

Slide Toggle inside of a Reactive form

- + Enable Wifi Accept Terms of Service -

Form Group Status: {{ formGroup.status}}

+

Form Group Status: {{formGroup.status}}

diff --git a/src/material-examples/slide-toggle-forms/slide-toggle-forms-example.ts b/src/material-examples/slide-toggle-forms/slide-toggle-forms-example.ts index 2636c474dd8..d511f1f5bfb 100644 --- a/src/material-examples/slide-toggle-forms/slide-toggle-forms-example.ts +++ b/src/material-examples/slide-toggle-forms/slide-toggle-forms-example.ts @@ -20,7 +20,7 @@ export class SlideToggleFormsExample { }); } - onFormSubmit(formValue: any) { - alert(JSON.stringify(formValue, null, 2)); + onFormSubmit() { + alert(JSON.stringify(this.formGroup.value, null, 2)); } } diff --git a/src/material-examples/slider-configurable/slider-configurable-example.ts b/src/material-examples/slider-configurable/slider-configurable-example.ts index 80f20670990..7b75621dfd7 100644 --- a/src/material-examples/slider-configurable/slider-configurable-example.ts +++ b/src/material-examples/slider-configurable/slider-configurable-example.ts @@ -1,4 +1,5 @@ -import {Component, ViewEncapsulation} from '@angular/core'; +import {coerceNumberProperty} from '@angular/cdk/coercion'; +import {Component} from '@angular/core'; /** * @title Configurable slider @@ -7,7 +8,6 @@ import {Component, ViewEncapsulation} from '@angular/core'; selector: 'slider-configurable-example', templateUrl: 'slider-configurable-example.html', styleUrls: ['slider-configurable-example.css'], - encapsulation: ViewEncapsulation.None, }) export class SliderConfigurableExample { autoTicks = false; @@ -24,8 +24,8 @@ export class SliderConfigurableExample { get tickInterval(): number | 'auto' { return this.showTicks ? (this.autoTicks ? 'auto' : this._tickInterval) : 0; } - set tickInterval(v) { - this._tickInterval = Number(v); + set tickInterval(value) { + this._tickInterval = coerceNumberProperty(value); } private _tickInterval = 1; } diff --git a/src/material-examples/snack-bar-component/snack-bar-component-example.ts b/src/material-examples/snack-bar-component/snack-bar-component-example.ts index cf3fafdfdab..bd121c3812c 100644 --- a/src/material-examples/snack-bar-component/snack-bar-component-example.ts +++ b/src/material-examples/snack-bar-component/snack-bar-component-example.ts @@ -22,6 +22,10 @@ export class SnackBarComponentExample { @Component({ selector: 'snack-bar-component-example-snack', templateUrl: 'snack-bar-component-example-snack.html', - styles: [`.example-pizza-party { color: hotpink; }`], + styles: [` + .example-pizza-party { + color: hotpink; + } + `], }) export class PizzaPartyComponent {} diff --git a/src/material-examples/sort-overview/sort-overview-example.ts b/src/material-examples/sort-overview/sort-overview-example.ts index 58b19b39302..4062c8238f9 100644 --- a/src/material-examples/sort-overview/sort-overview-example.ts +++ b/src/material-examples/sort-overview/sort-overview-example.ts @@ -1,6 +1,14 @@ import {Component} from '@angular/core'; import {Sort} from '@angular/material'; +export interface Dessert { + calories: number; + carbs: number; + fat: number; + name: string; + protein: number; +} + /** * @title Sorting overview */ @@ -10,15 +18,15 @@ import {Sort} from '@angular/material'; styleUrls: ['sort-overview-example.css'], }) export class SortOverviewExample { - desserts = [ - {name: 'Frozen yogurt', calories: '159', fat: '6', carbs: '24', protein: '4'}, - {name: 'Ice cream sandwich', calories: '237', fat: '9', carbs: '37', protein: '4'}, - {name: 'Eclair', calories: '262', fat: '16', carbs: '24', protein: '6'}, - {name: 'Cupcake', calories: '305', fat: '4', carbs: '67', protein: '4'}, - {name: 'Gingerbread', calories: '356', fat: '16', carbs: '49', protein: '4'}, + desserts: Dessert[] = [ + {name: 'Frozen yogurt', calories: 159, fat: 6, carbs: 24, protein: 4}, + {name: 'Ice cream sandwich', calories: 237, fat: 9, carbs: 37, protein: 4}, + {name: 'Eclair', calories: 262, fat: 16, carbs: 24, protein: 6}, + {name: 'Cupcake', calories: 305, fat: 4, carbs: 67, protein: 4}, + {name: 'Gingerbread', calories: 356, fat: 16, carbs: 49, protein: 4}, ]; - sortedData; + sortedData: Dessert[]; constructor() { this.sortedData = this.desserts.slice(); @@ -26,19 +34,19 @@ export class SortOverviewExample { sortData(sort: Sort) { const data = this.desserts.slice(); - if (!sort.active || sort.direction == '') { + if (!sort.active || sort.direction === '') { this.sortedData = data; return; } this.sortedData = data.sort((a, b) => { - let isAsc = sort.direction == 'asc'; + const isAsc = sort.direction === 'asc'; switch (sort.active) { case 'name': return compare(a.name, b.name, isAsc); - case 'calories': return compare(+a.calories, +b.calories, isAsc); - case 'fat': return compare(+a.fat, +b.fat, isAsc); - case 'carbs': return compare(+a.carbs, +b.carbs, isAsc); - case 'protein': return compare(+a.protein, +b.protein, isAsc); + case 'calories': return compare(a.calories, b.calories, isAsc); + case 'fat': return compare(a.fat, b.fat, isAsc); + case 'carbs': return compare(a.carbs, b.carbs, isAsc); + case 'protein': return compare(a.protein, b.protein, isAsc); default: return 0; } }); diff --git a/src/material-examples/stepper-editable/stepper-editable-example.html b/src/material-examples/stepper-editable/stepper-editable-example.html index 05c22c5ac5d..e9162fea4e0 100644 --- a/src/material-examples/stepper-editable/stepper-editable-example.html +++ b/src/material-examples/stepper-editable/stepper-editable-example.html @@ -2,7 +2,7 @@ {{!isEditable ? 'Enable edit mode' : 'Disable edit mode'}} - +
Fill out your name diff --git a/src/material-examples/stepper-editable/stepper-editable-example.ts b/src/material-examples/stepper-editable/stepper-editable-example.ts index c70b275c351..d052b27451e 100644 --- a/src/material-examples/stepper-editable/stepper-editable-example.ts +++ b/src/material-examples/stepper-editable/stepper-editable-example.ts @@ -12,9 +12,9 @@ import {FormBuilder, FormGroup, Validators} from '@angular/forms'; export class StepperEditableExample implements OnInit { firstFormGroup: FormGroup; secondFormGroup: FormGroup; - isEditable: boolean = false; + isEditable = false; - constructor(private _formBuilder: FormBuilder) { } + constructor(private _formBuilder: FormBuilder) {} ngOnInit() { this.firstFormGroup = this._formBuilder.group({ diff --git a/src/material-examples/stepper-optional/stepper-optional-example.html b/src/material-examples/stepper-optional/stepper-optional-example.html index 004b3458d7c..31c390bf443 100644 --- a/src/material-examples/stepper-optional/stepper-optional-example.html +++ b/src/material-examples/stepper-optional/stepper-optional-example.html @@ -2,7 +2,7 @@ {{!isOptional ? 'Enable optional steps' : 'Disable optional steps'}} - + Fill out your name diff --git a/src/material-examples/stepper-optional/stepper-optional-example.ts b/src/material-examples/stepper-optional/stepper-optional-example.ts index 44935073dfa..7096da95ed9 100644 --- a/src/material-examples/stepper-optional/stepper-optional-example.ts +++ b/src/material-examples/stepper-optional/stepper-optional-example.ts @@ -12,9 +12,9 @@ import {FormBuilder, FormGroup, Validators} from '@angular/forms'; export class StepperOptionalExample implements OnInit { firstFormGroup: FormGroup; secondFormGroup: FormGroup; - isOptional: boolean = false; + isOptional = false; - constructor(private _formBuilder: FormBuilder) { } + constructor(private _formBuilder: FormBuilder) {} ngOnInit() { this.firstFormGroup = this._formBuilder.group({ diff --git a/src/material-examples/stepper-overview/stepper-overview-example.ts b/src/material-examples/stepper-overview/stepper-overview-example.ts index cd2c18299cf..16690bbe818 100644 --- a/src/material-examples/stepper-overview/stepper-overview-example.ts +++ b/src/material-examples/stepper-overview/stepper-overview-example.ts @@ -7,14 +7,14 @@ import {FormBuilder, FormGroup, Validators} from '@angular/forms'; @Component({ selector: 'stepper-overview-example', templateUrl: 'stepper-overview-example.html', - styleUrls: ['stepper-overview-example.css'] + styleUrls: ['stepper-overview-example.css'], }) export class StepperOverviewExample implements OnInit { isLinear = false; firstFormGroup: FormGroup; secondFormGroup: FormGroup; - constructor(private _formBuilder: FormBuilder) { } + constructor(private _formBuilder: FormBuilder) {} ngOnInit() { this.firstFormGroup = this._formBuilder.group({ diff --git a/src/material-examples/stepper-vertical/stepper-vertical-example.ts b/src/material-examples/stepper-vertical/stepper-vertical-example.ts index 13229872f1f..26bc7486d21 100644 --- a/src/material-examples/stepper-vertical/stepper-vertical-example.ts +++ b/src/material-examples/stepper-vertical/stepper-vertical-example.ts @@ -14,7 +14,7 @@ export class StepperVerticalExample implements OnInit { firstFormGroup: FormGroup; secondFormGroup: FormGroup; - constructor(private _formBuilder: FormBuilder) { } + constructor(private _formBuilder: FormBuilder) {} ngOnInit() { this.firstFormGroup = this._formBuilder.group({ diff --git a/src/material-examples/tab-nav-bar-basic/tab-nav-bar-basic-example.html b/src/material-examples/tab-nav-bar-basic/tab-nav-bar-basic-example.html index 86d05003f3f..538f335c1b8 100644 --- a/src/material-examples/tab-nav-bar-basic/tab-nav-bar-basic-example.html +++ b/src/material-examples/tab-nav-bar-basic/tab-nav-bar-basic-example.html @@ -7,6 +7,6 @@ diff --git a/src/material-examples/table-basic-flex/table-basic-flex-example.ts b/src/material-examples/table-basic-flex/table-basic-flex-example.ts index f75072d0e74..eb0066c4cf5 100644 --- a/src/material-examples/table-basic-flex/table-basic-flex-example.ts +++ b/src/material-examples/table-basic-flex/table-basic-flex-example.ts @@ -1,18 +1,5 @@ import {Component} from '@angular/core'; -/** - * @title Basic use of `` (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 `` (uses display flex) + */ +@Component({ + selector: 'table-basic-flex-example', + styleUrls: ['table-basic-flex-example.css'], + templateUrl: 'table-basic-flex-example.html', +}) +export class TableBasicFlexExample { + displayedColumns: string[] = ['position', 'name', 'weight', 'symbol']; + dataSource = ELEMENT_DATA; +} diff --git a/src/material-examples/table-basic/table-basic-example.ts b/src/material-examples/table-basic/table-basic-example.ts index 3042613e2d5..517218a256e 100644 --- a/src/material-examples/table-basic/table-basic-example.ts +++ b/src/material-examples/table-basic/table-basic-example.ts @@ -1,18 +1,5 @@ import {Component} from '@angular/core'; -/** - * @title Basic use of `` - */ -@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 `
` + */ +@Component({ + selector: 'table-basic-example', + styleUrls: ['table-basic-example.css'], + templateUrl: 'table-basic-example.html', +}) +export class TableBasicExample { + displayedColumns: string[] = ['position', 'name', 'weight', 'symbol']; + dataSource = ELEMENT_DATA; +} diff --git a/src/material-examples/table-dynamic-columns/table-dynamic-columns-example.html b/src/material-examples/table-dynamic-columns/table-dynamic-columns-example.html index 0463410e596..9d2fcac7ac3 100644 --- a/src/material-examples/table-dynamic-columns/table-dynamic-columns-example.html +++ b/src/material-examples/table-dynamic-columns/table-dynamic-columns-example.html @@ -3,7 +3,7 @@
- + diff --git a/src/material-examples/table-dynamic-columns/table-dynamic-columns-example.ts b/src/material-examples/table-dynamic-columns/table-dynamic-columns-example.ts index 107226fc60a..4948c44ae4f 100644 --- a/src/material-examples/table-dynamic-columns/table-dynamic-columns-example.ts +++ b/src/material-examples/table-dynamic-columns/table-dynamic-columns-example.ts @@ -1,5 +1,25 @@ import {Component} from '@angular/core'; +export interface PeriodicElement { + name: string; + position: number; + weight: number; + symbol: string; +} + +const ELEMENT_DATA: PeriodicElement[] = [ + {position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'}, + {position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'}, + {position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'}, + {position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be'}, + {position: 5, name: 'Boron', weight: 10.811, symbol: 'B'}, + {position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C'}, + {position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N'}, + {position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O'}, + {position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F'}, + {position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne'}, +]; + /** * @title Table dynamically changing the columns displayed */ @@ -9,13 +29,13 @@ import {Component} from '@angular/core'; templateUrl: 'table-dynamic-columns-example.html', }) export class TableDynamicColumnsExample { - definedColumns = ['name', 'weight', 'symbol', 'position']; - columnsToDisplay = this.definedColumns.slice(); + displayedColumns: string[] = ['name', 'weight', 'symbol', 'position']; + columnsToDisplay: string[] = this.displayedColumns.slice(); data: PeriodicElement[] = ELEMENT_DATA; addColumn() { - const randomColumn = Math.floor(Math.random() * this.definedColumns.length); - this.columnsToDisplay.push(this.definedColumns[randomColumn]); + const randomColumn = Math.floor(Math.random() * this.displayedColumns.length); + this.columnsToDisplay.push(this.displayedColumns[randomColumn]); } removeColumn() { @@ -37,23 +57,3 @@ export class TableDynamicColumnsExample { } } } - -export interface PeriodicElement { - name: string; - position: number; - weight: number; - symbol: string; -} - -const ELEMENT_DATA: PeriodicElement[] = [ - {position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'}, - {position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'}, - {position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'}, - {position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be'}, - {position: 5, name: 'Boron', weight: 10.811, symbol: 'B'}, - {position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C'}, - {position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N'}, - {position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O'}, - {position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F'}, - {position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne'}, -]; diff --git a/src/material-examples/table-filtering/table-filtering-example.ts b/src/material-examples/table-filtering/table-filtering-example.ts index 4b4800b1afd..e1b572b59d9 100644 --- a/src/material-examples/table-filtering/table-filtering-example.ts +++ b/src/material-examples/table-filtering/table-filtering-example.ts @@ -1,25 +1,6 @@ import {Component} from '@angular/core'; import {MatTableDataSource} from '@angular/material'; -/** - * @title Table with filtering - */ -@Component({ - selector: 'table-filtering-example', - styleUrls: ['table-filtering-example.css'], - templateUrl: 'table-filtering-example.html', -}) -export class TableFilteringExample { - displayedColumns = ['position', 'name', 'weight', 'symbol']; - dataSource = new MatTableDataSource(ELEMENT_DATA); - - applyFilter(filterValue: string) { - filterValue = filterValue.trim(); // Remove whitespace - filterValue = filterValue.toLowerCase(); // MatTableDataSource defaults to lowercase matches - this.dataSource.filter = filterValue; - } -} - export interface PeriodicElement { name: string; position: number; @@ -39,3 +20,20 @@ const ELEMENT_DATA: PeriodicElement[] = [ {position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F'}, {position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne'}, ]; + +/** + * @title Table with filtering + */ +@Component({ + selector: 'table-filtering-example', + styleUrls: ['table-filtering-example.css'], + templateUrl: 'table-filtering-example.html', +}) +export class TableFilteringExample { + displayedColumns: string[] = ['position', 'name', 'weight', 'symbol']; + dataSource = new MatTableDataSource(ELEMENT_DATA); + + applyFilter(filterValue: string) { + this.dataSource.filter = filterValue.trim().toLowerCase(); + } +} diff --git a/src/material-examples/table-footer-row/table-footer-row-example.ts b/src/material-examples/table-footer-row/table-footer-row-example.ts index c4df488b29c..922273799d0 100644 --- a/src/material-examples/table-footer-row/table-footer-row-example.ts +++ b/src/material-examples/table-footer-row/table-footer-row-example.ts @@ -14,7 +14,7 @@ export interface Transaction { templateUrl: 'table-footer-row-example.html', }) export class TableFooterRowExample { - displayedColumns = ['item', 'cost']; + displayedColumns: string[] = ['item', 'cost']; transactions: Transaction[] = [ {item: 'Beach ball', cost: 4}, {item: 'Towel', cost: 5}, diff --git a/src/material-examples/table-http/table-http-example.html b/src/material-examples/table-http/table-http-example.html index 499928578d9..acdc824d5dd 100644 --- a/src/material-examples/table-http/table-http-example.html +++ b/src/material-examples/table-http/table-http-example.html @@ -14,27 +14,27 @@ - + - + - + - - + diff --git a/src/material-examples/table-http/table-http-example.ts b/src/material-examples/table-http/table-http-example.ts index 9475078b244..aeab64373a4 100644 --- a/src/material-examples/table-http/table-http-example.ts +++ b/src/material-examples/table-http/table-http-example.ts @@ -13,7 +13,7 @@ import {catchError, map, startWith, switchMap} from 'rxjs/operators'; templateUrl: 'table-http-example.html', }) export class TableHttpExample implements OnInit { - displayedColumns = ['created', 'state', 'number', 'title']; + displayedColumns: string[] = ['created', 'state', 'number', 'title']; exampleDatabase: ExampleHttpDao | null; data: GithubIssue[] = []; diff --git a/src/material-examples/table-multiple-header-footer/table-multiple-header-footer-example.ts b/src/material-examples/table-multiple-header-footer/table-multiple-header-footer-example.ts index 1832eb4ba3f..87c17befa8f 100644 --- a/src/material-examples/table-multiple-header-footer/table-multiple-header-footer-example.ts +++ b/src/material-examples/table-multiple-header-footer/table-multiple-header-footer-example.ts @@ -15,7 +15,7 @@ export interface Transaction { templateUrl: 'table-multiple-header-footer-example.html', }) export class TableMultipleHeaderFooterExample { - displayedColumns = ['item', 'cost']; + displayedColumns: string[] = ['item', 'cost']; transactions: Transaction[] = [ {item: 'Beach ball', cost: 4}, {item: 'Towel', cost: 5}, diff --git a/src/material-examples/table-overview/table-overview-example.ts b/src/material-examples/table-overview/table-overview-example.ts index 9e58578ddf6..62eec1ce556 100644 --- a/src/material-examples/table-overview/table-overview-example.ts +++ b/src/material-examples/table-overview/table-overview-example.ts @@ -1,6 +1,20 @@ import {Component, OnInit, ViewChild} from '@angular/core'; import {MatPaginator, MatSort, MatTableDataSource} from '@angular/material'; +export interface UserData { + id: string; + name: string; + progress: string; + color: string; +} + +/** Constants used to fill up our data base. */ +const COLORS: string[] = ['maroon', 'red', 'orange', 'yellow', 'olive', 'green', 'purple', + 'fuchsia', 'lime', 'teal', 'aqua', 'blue', 'navy', 'black', 'gray']; +const NAMES: string[] = ['Maia', 'Asher', 'Olivia', 'Atticus', 'Amelia', 'Jack', + 'Charlotte', 'Theodore', 'Isla', 'Oliver', 'Isabella', 'Jasper', + 'Cora', 'Levi', 'Violet', 'Arthur', 'Mia', 'Thomas', 'Elizabeth']; + /** * @title Data table with sorting, pagination, and filtering. */ @@ -10,7 +24,7 @@ import {MatPaginator, MatSort, MatTableDataSource} from '@angular/material'; templateUrl: 'table-overview-example.html', }) export class TableOverviewExample implements OnInit { - displayedColumns = ['id', 'name', 'progress', 'color']; + displayedColumns: string[] = ['id', 'name', 'progress', 'color']; dataSource: MatTableDataSource; @ViewChild(MatPaginator) paginator: MatPaginator; @@ -18,8 +32,7 @@ export class TableOverviewExample implements OnInit { constructor() { // Create 100 users - const users: UserData[] = []; - for (let i = 1; i <= 100; i++) { users.push(createNewUser(i)); } + const users = Array.from({length: 100}, (_, k) => createNewUser(k + 1)); // Assign the data to the data source for the table to render this.dataSource = new MatTableDataSource(users); @@ -31,9 +44,8 @@ export class TableOverviewExample implements OnInit { } applyFilter(filterValue: string) { - filterValue = filterValue.trim(); // Remove whitespace - filterValue = filterValue.toLowerCase(); // Datasource defaults to lowercase matches - this.dataSource.filter = filterValue; + this.dataSource.filter = filterValue.trim().toLowerCase(); + if (this.dataSource.paginator) { this.dataSource.paginator.firstPage(); } @@ -53,17 +65,3 @@ function createNewUser(id: number): UserData { color: COLORS[Math.round(Math.random() * (COLORS.length - 1))] }; } - -/** Constants used to fill up our data base. */ -const COLORS = ['maroon', 'red', 'orange', 'yellow', 'olive', 'green', 'purple', - 'fuchsia', 'lime', 'teal', 'aqua', 'blue', 'navy', 'black', 'gray']; -const NAMES = ['Maia', 'Asher', 'Olivia', 'Atticus', 'Amelia', 'Jack', - 'Charlotte', 'Theodore', 'Isla', 'Oliver', 'Isabella', 'Jasper', - 'Cora', 'Levi', 'Violet', 'Arthur', 'Mia', 'Thomas', 'Elizabeth']; - -export interface UserData { - id: string; - name: string; - progress: string; - color: string; -} diff --git a/src/material-examples/table-pagination/table-pagination-example.ts b/src/material-examples/table-pagination/table-pagination-example.ts index 6a4e03c5818..e4cad373a8e 100644 --- a/src/material-examples/table-pagination/table-pagination-example.ts +++ b/src/material-examples/table-pagination/table-pagination-example.ts @@ -10,7 +10,7 @@ import {MatPaginator, MatTableDataSource} from '@angular/material'; templateUrl: 'table-pagination-example.html', }) export class TablePaginationExample implements OnInit { - displayedColumns = ['position', 'name', 'weight', 'symbol']; + displayedColumns: string[] = ['position', 'name', 'weight', 'symbol']; dataSource = new MatTableDataSource(ELEMENT_DATA); @ViewChild(MatPaginator) paginator: MatPaginator; diff --git a/src/material-examples/table-row-context/table-row-context-example.ts b/src/material-examples/table-row-context/table-row-context-example.ts index 7799dd0547e..5c041552f05 100644 --- a/src/material-examples/table-row-context/table-row-context-example.ts +++ b/src/material-examples/table-row-context/table-row-context-example.ts @@ -9,6 +9,6 @@ import {Component} from '@angular/core'; templateUrl: 'table-row-context-example.html', }) export class TableRowContextExample { - displayedColumns = ['$implicit', 'index', 'count', 'first', 'last', 'even', 'odd']; + displayedColumns: string[] = ['$implicit', 'index', 'count', 'first', 'last', 'even', 'odd']; data: string[] = ['one', 'two', 'three', 'four', 'five']; } diff --git a/src/material-examples/table-selection/table-selection-example.ts b/src/material-examples/table-selection/table-selection-example.ts index cee88c81e7c..15336737658 100644 --- a/src/material-examples/table-selection/table-selection-example.ts +++ b/src/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(ELEMENT_DATA); - selection = new SelectionModel(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(ELEMENT_DATA); + selection = new SelectionModel(true, []); + + /** Whether the number of selected elements matches the total number of rows. */ + isAllSelected() { + const numSelected = this.selection.selected.length; + const numRows = this.dataSource.data.length; + return numSelected === numRows; + } + + /** Selects all rows if they are not all selected; otherwise clear selection. */ + masterToggle() { + this.isAllSelected() ? + this.selection.clear() : + this.dataSource.data.forEach(row => this.selection.select(row)); + } +} diff --git a/src/material-examples/table-sorting/table-sorting-example.ts b/src/material-examples/table-sorting/table-sorting-example.ts index 8878e7446c6..cc992b0eee2 100644 --- a/src/material-examples/table-sorting/table-sorting-example.ts +++ b/src/material-examples/table-sorting/table-sorting-example.ts @@ -1,25 +1,6 @@ import {Component, OnInit, ViewChild} from '@angular/core'; import {MatSort, MatTableDataSource} from '@angular/material'; -/** - * @title Table with sorting - */ -@Component({ - selector: 'table-sorting-example', - styleUrls: ['table-sorting-example.css'], - templateUrl: 'table-sorting-example.html', -}) -export class TableSortingExample implements OnInit { - displayedColumns = ['position', 'name', 'weight', 'symbol']; - dataSource = new MatTableDataSource(ELEMENT_DATA); - - @ViewChild(MatSort) sort: MatSort; - - ngOnInit() { - this.dataSource.sort = this.sort; - } -} - export interface PeriodicElement { name: string; position: number; @@ -39,3 +20,22 @@ const ELEMENT_DATA: PeriodicElement[] = [ {position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F'}, {position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne'}, ]; + +/** + * @title Table with sorting + */ +@Component({ + selector: 'table-sorting-example', + styleUrls: ['table-sorting-example.css'], + templateUrl: 'table-sorting-example.html', +}) +export class TableSortingExample implements OnInit { + displayedColumns: string[] = ['position', 'name', 'weight', 'symbol']; + dataSource = new MatTableDataSource(ELEMENT_DATA); + + @ViewChild(MatSort) sort: MatSort; + + ngOnInit() { + this.dataSource.sort = this.sort; + } +} diff --git a/src/material-examples/tooltip-custom-class/tooltip-custom-class-example.ts b/src/material-examples/tooltip-custom-class/tooltip-custom-class-example.ts index 51e7f754556..62419465536 100644 --- a/src/material-examples/tooltip-custom-class/tooltip-custom-class-example.ts +++ b/src/material-examples/tooltip-custom-class/tooltip-custom-class-example.ts @@ -11,4 +11,4 @@ import {Component, ViewEncapsulation} from '@angular/core'; // `tooltip-custom-class-example.css` will not be scoped to this component's view. encapsulation: ViewEncapsulation.None, }) -export class TooltipCustomClassExample { } +export class TooltipCustomClassExample {} diff --git a/src/material-examples/tooltip-position/tooltip-position-example.html b/src/material-examples/tooltip-position/tooltip-position-example.html index f4b765516ac..444dbad7ade 100644 --- a/src/material-examples/tooltip-position/tooltip-position-example.html +++ b/src/material-examples/tooltip-position/tooltip-position-example.html @@ -1,7 +1,7 @@ - {{ positionOption }} + {{positionOption}} diff --git a/src/material-examples/tree-checklist/tree-checklist-example.ts b/src/material-examples/tree-checklist/tree-checklist-example.ts index 5407d08279f..89ede449c06 100644 --- a/src/material-examples/tree-checklist/tree-checklist-example.ts +++ b/src/material-examples/tree-checklist/tree-checklist-example.ts @@ -1,9 +1,8 @@ -import {Component, Injectable} from '@angular/core'; import {SelectionModel} from '@angular/cdk/collections'; import {FlatTreeControl} from '@angular/cdk/tree'; -import {MatTreeFlattener, MatTreeFlatDataSource} from '@angular/material/tree'; -import {of as ofObservable, Observable, BehaviorSubject} from 'rxjs'; - +import {Component, Injectable} from '@angular/core'; +import {MatTreeFlatDataSource, MatTreeFlattener} from '@angular/material/tree'; +import {BehaviorSubject, Observable, of as observableOf} from 'rxjs'; /** * Node for to-do item @@ -24,21 +23,21 @@ export class TodoItemFlatNode { * The Json object for to-do list data. */ const TREE_DATA = { - 'Reminders': [ + Groceries: { + 'Almond Meal flour': null, + 'Organic eggs': null, + 'Protein Powder': null, + Fruits: { + Apple: null, + Berries: ['Blueberry', 'Raspberry'], + Orange: null + } + }, + Reminders: [ 'Cook dinner', 'Read the Material Design spec', 'Upgrade Application to Angular' - ], - 'Groceries': { - 'Organic eggs': null, - 'Protein Powder': null, - 'Almond Meal flour': null, - 'Fruits': { - 'Apple': null, - 'Orange': null, - 'Berries': ['Blueberry', 'Raspberry'] - } - } + ] }; /** @@ -48,7 +47,7 @@ const TREE_DATA = { */ @Injectable() export class ChecklistDatabase { - dataChange: BehaviorSubject = new BehaviorSubject([]); + dataChange = new BehaviorSubject([]); get data(): TodoItemNode[] { return this.dataChange.value; } @@ -69,29 +68,28 @@ export class ChecklistDatabase { * Build the file structure tree. The `value` is the Json object, or a sub-tree of a Json object. * The return value is the list of `TodoItemNode`. */ - buildFileTree(value: any, level: number) { - let data: any[] = []; - for (let k in value) { - let v = value[k]; - let node = new TodoItemNode(); - node.item = `${k}`; - if (v === null || v === undefined) { - // no action - } else if (typeof v === 'object') { - node.children = this.buildFileTree(v, level + 1); - } else { - node.item = v; + buildFileTree(obj: object, level: number): TodoItemNode[] { + return Object.keys(obj).reduce((accumulator, key) => { + const value = obj[key]; + const node = new TodoItemNode(); + node.item = key; + + if (value != null) { + if (typeof value === 'object') { + node.children = this.buildFileTree(value, level + 1); + } else { + node.item = value; + } } - data.push(node); - } - return data; + + return accumulator.concat(node); + }, []); } /** Add an item to to-do list */ insertItem(parent: TodoItemNode, name: string) { - const child = {item: name}; if (parent.children) { - parent.children.push(child); + parent.children.push({item: name} as TodoItemNode); this.dataChange.next(this.data); } } @@ -113,16 +111,16 @@ export class ChecklistDatabase { }) export class TreeChecklistExample { /** Map from flat node to nested node. This helps us finding the nested node to be modified */ - flatNodeMap: Map = new Map(); + flatNodeMap = new Map(); /** Map from nested node to flattened node. This helps us to keep the same object for selection */ - nestedNodeMap: Map = new Map(); + nestedNodeMap = new Map(); /** A selected parent node to be inserted */ selectedParent: TodoItemFlatNode | null = null; /** The new item's name */ - newItemName: string = ''; + newItemName = ''; treeControl: FlatTreeControl; @@ -144,25 +142,24 @@ export class TreeChecklistExample { }); } - getLevel = (node: TodoItemFlatNode) => { return node.level; }; + getLevel = (node: TodoItemFlatNode) => node.level; - isExpandable = (node: TodoItemFlatNode) => { return node.expandable; }; + isExpandable = (node: TodoItemFlatNode) => node.expandable; - getChildren = (node: TodoItemNode): Observable => { - return ofObservable(node.children); - } + getChildren = (node: TodoItemNode): Observable => observableOf(node.children); - hasChild = (_: number, _nodeData: TodoItemFlatNode) => { return _nodeData.expandable; }; + hasChild = (_: number, _nodeData: TodoItemFlatNode) => _nodeData.expandable; - hasNoContent = (_: number, _nodeData: TodoItemFlatNode) => { return _nodeData.item === ''; }; + hasNoContent = (_: number, _nodeData: TodoItemFlatNode) => _nodeData.item === ''; /** * Transformer to convert nested node to flat node. Record the nodes in maps for later use. */ transformer = (node: TodoItemNode, level: number) => { - let flatNode = this.nestedNodeMap.has(node) && this.nestedNodeMap.get(node)!.item === node.item - ? this.nestedNodeMap.get(node)! - : new TodoItemFlatNode(); + const existingNode = this.nestedNodeMap.get(node); + const flatNode = existingNode && existingNode.item === node.item + ? existingNode + : new TodoItemFlatNode(); flatNode.item = node.item; flatNode.level = level; flatNode.expandable = !!node.children; diff --git a/src/material-examples/tree-dynamic/tree-dynamic-example.ts b/src/material-examples/tree-dynamic/tree-dynamic-example.ts index 7f9b4052826..8f560382650 100644 --- a/src/material-examples/tree-dynamic/tree-dynamic-example.ts +++ b/src/material-examples/tree-dynamic/tree-dynamic-example.ts @@ -1,37 +1,34 @@ -import {Component, Injectable} from '@angular/core'; -import {FlatTreeControl} from '@angular/cdk/tree'; import {CollectionViewer, SelectionChange} from '@angular/cdk/collections'; -import {BehaviorSubject, Observable, merge} from 'rxjs'; +import {FlatTreeControl} from '@angular/cdk/tree'; +import {Component, Injectable} from '@angular/core'; +import {BehaviorSubject, merge, Observable} from 'rxjs'; import {map} from 'rxjs/operators'; - /** Flat node with expandable and level information */ export class DynamicFlatNode { - constructor(public item: string, public level: number = 1, public expandable: boolean = false, - public isLoading: boolean = false) {} + constructor(public item: string, public level = 1, public expandable = false, + public isLoading = false) {} } - /** * Database for dynamic data. When expanding a node in the tree, the data source will need to fetch * the descendants data from the database. */ export class DynamicDatabase { - dataMap = new Map([ + dataMap = new Map([ ['Fruits', ['Apple', 'Orange', 'Banana']], ['Vegetables', ['Tomato', 'Potato', 'Onion']], ['Apple', ['Fuji', 'Macintosh']], ['Onion', ['Yellow', 'White', 'Purple']] ]); - rootLevelNodes = ['Fruits', 'Vegetables']; + rootLevelNodes: string[] = ['Fruits', 'Vegetables']; /** Initial data from database */ initialData(): DynamicFlatNode[] { return this.rootLevelNodes.map(name => new DynamicFlatNode(name, 0, true)); } - getChildren(node: string): string[] | undefined { return this.dataMap.get(node); } @@ -50,7 +47,7 @@ export class DynamicDatabase { @Injectable() export class DynamicDataSource { - dataChange: BehaviorSubject = new BehaviorSubject([]); + dataChange = new BehaviorSubject([]); get data(): DynamicFlatNode[] { return this.dataChange.value; } set data(value: DynamicFlatNode[]) { @@ -75,10 +72,10 @@ export class DynamicDataSource { /** Handle expand/collapse behaviors */ handleTreeControl(change: SelectionChange) { if (change.added) { - change.added.forEach((node) => this.toggleNode(node, true)); + change.added.forEach(node => this.toggleNode(node, true)); } if (change.removed) { - change.removed.reverse().forEach((node) => this.toggleNode(node, false)); + change.removed.slice().reverse().forEach(node => this.toggleNode(node, false)); } } @@ -123,7 +120,6 @@ export class DynamicDataSource { providers: [DynamicDatabase] }) export class TreeDynamicExample { - constructor(database: DynamicDatabase) { this.treeControl = new FlatTreeControl(this.getLevel, this.isExpandable); this.dataSource = new DynamicDataSource(this.treeControl, database); @@ -135,9 +131,9 @@ export class TreeDynamicExample { dataSource: DynamicDataSource; - getLevel = (node: DynamicFlatNode) => { return node.level; }; + getLevel = (node: DynamicFlatNode) => node.level; - isExpandable = (node: DynamicFlatNode) => { return node.expandable; }; + isExpandable = (node: DynamicFlatNode) => node.expandable; - hasChild = (_: number, _nodeData: DynamicFlatNode) => { return _nodeData.expandable; }; + hasChild = (_: number, _nodeData: DynamicFlatNode) => _nodeData.expandable; } diff --git a/src/material-examples/tree-flat-overview/tree-flat-overview-example.ts b/src/material-examples/tree-flat-overview/tree-flat-overview-example.ts index ebdaf064f6b..ba7a4dad1d6 100644 --- a/src/material-examples/tree-flat-overview/tree-flat-overview-example.ts +++ b/src/material-examples/tree-flat-overview/tree-flat-overview-example.ts @@ -15,51 +15,48 @@ export class FileNode { /** Flat node with expandable and level information */ export class FileFlatNode { - filename: string; - type: any; - level: number; - expandable: boolean; + constructor( + public expandable: boolean, public filename: string, public level: number, public type: any) {} } /** * The file structure tree data in string. The data could be parsed into a Json object */ -const TREE_DATA = ` - { - "Documents": { - "angular": { - "src": { - "core": "ts", - "compiler": "ts" - } - }, - "material2": { - "src": { - "button": "ts", - "checkbox": "ts", - "input": "ts" - } +const TREE_DATA = JSON.stringify({ + Applications: { + Calendar: 'app', + Chrome: 'app', + Webstorm: 'app' + }, + Documents: { + angular: { + src: { + compiler: 'ts', + core: 'ts' } }, - "Downloads": { - "Tutorial": "html", - "November": "pdf", - "October": "pdf" - }, - "Pictures": { - "Sun": "png", - "Woods": "jpg", - "Photo Booth Library": { - "Contents": "dir", - "Pictures": "dir" - } - }, - "Applications": { - "Chrome": "app", - "Calendar": "app", - "Webstorm": "app" + material2: { + src: { + button: 'ts', + checkbox: 'ts', + input: 'ts' + } } -}`; + }, + Downloads: { + October: 'pdf', + November: 'pdf', + Tutorial: 'html' + }, + Pictures: { + 'Photo Booth Library': { + Contents: 'dir', + Pictures: 'dir' + }, + Sun: 'png', + Woods: 'jpg' + } +}); /** * File database, it can build a tree structured Json object from string. @@ -70,7 +67,7 @@ const TREE_DATA = ` */ @Injectable() export class FileDatabase { - dataChange: BehaviorSubject = new BehaviorSubject([]); + dataChange = new BehaviorSubject([]); get data(): FileNode[] { return this.dataChange.value; } @@ -94,22 +91,22 @@ export class FileDatabase { * Build the file structure tree. The `value` is the Json object, or a sub-tree of a Json object. * The return value is the list of `FileNode`. */ - buildFileTree(value: any, level: number): FileNode[] { - let data: any[] = []; - for (let k in value) { - let v = value[k]; - let node = new FileNode(); - node.filename = `${k}`; - if (v === null || v === undefined) { - // no action - } else if (typeof v === 'object') { - node.children = this.buildFileTree(v, level + 1); - } else { - node.type = v; + buildFileTree(obj: object, level: number): FileNode[] { + return Object.keys(obj).reduce((accumulator, key) => { + const value = obj[key]; + const node = new FileNode(); + node.filename = key; + + if (value != null) { + if (typeof value === 'object') { + node.children = this.buildFileTree(value, level + 1); + } else { + node.type = value; + } } - data.push(node); - } - return data; + + return accumulator.concat(node); + }, []); } } @@ -123,11 +120,8 @@ export class FileDatabase { providers: [FileDatabase] }) export class TreeFlatOverviewExample { - treeControl: FlatTreeControl; - treeFlattener: MatTreeFlattener; - dataSource: MatTreeFlatDataSource; constructor(database: FileDatabase) { @@ -136,27 +130,18 @@ export class TreeFlatOverviewExample { this.treeControl = new FlatTreeControl(this._getLevel, this._isExpandable); this.dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener); - database.dataChange.subscribe(data => { - this.dataSource.data = data; - }); + database.dataChange.subscribe(data => this.dataSource.data = data); } transformer = (node: FileNode, level: number) => { - let flatNode = new FileFlatNode(); - flatNode.filename = node.filename; - flatNode.type = node.type; - flatNode.level = level; - flatNode.expandable = !!node.children; - return flatNode; + return new FileFlatNode(!!node.children, node.filename, level, node.type); } - private _getLevel = (node: FileFlatNode) => { return node.level; }; + private _getLevel = (node: FileFlatNode) => node.level; - private _isExpandable = (node: FileFlatNode) => { return node.expandable; }; + private _isExpandable = (node: FileFlatNode) => node.expandable; - private _getChildren = (node: FileNode): Observable => { - return observableOf(node.children); - } + private _getChildren = (node: FileNode): Observable => observableOf(node.children); - hasChild = (_: number, _nodeData: FileFlatNode) => { return _nodeData.expandable; }; + hasChild = (_: number, _nodeData: FileFlatNode) => _nodeData.expandable; } diff --git a/src/material-examples/tree-loadmore/tree-loadmore-example.ts b/src/material-examples/tree-loadmore/tree-loadmore-example.ts index 559ca190fca..0c958a8a97d 100644 --- a/src/material-examples/tree-loadmore/tree-loadmore-example.ts +++ b/src/material-examples/tree-loadmore/tree-loadmore-example.ts @@ -5,32 +5,31 @@ * Use of this source code is governed by an MIT-style license that can be * found in the LICENSE file at https://angular.io/license */ -import {Component, Injectable} from '@angular/core'; import {FlatTreeControl} from '@angular/cdk/tree'; +import {Component, Injectable} from '@angular/core'; import {MatTreeFlatDataSource, MatTreeFlattener} from '@angular/material/tree'; import {BehaviorSubject, Observable} from 'rxjs'; - const LOAD_MORE = 'LOAD_MORE'; /** Nested node */ export class LoadmoreNode { - childrenChange: BehaviorSubject = new BehaviorSubject([]); + childrenChange = new BehaviorSubject([]); get children(): LoadmoreNode[] { return this.childrenChange.value; } constructor(public item: string, - public hasChildren: boolean = false, + public hasChildren = false, public loadMoreParentItem: string | null = null) {} } /** Flat node with expandable and level information */ export class LoadmoreFlatNode { constructor(public item: string, - public level: number = 1, - public expandable: boolean = false, + public level = 1, + public expandable = false, public loadMoreParentItem: string | null = null) {} } @@ -41,12 +40,12 @@ export class LoadmoreFlatNode { @Injectable() export class LoadmoreDatabase { batchNumber = 5; - dataChange: BehaviorSubject = new BehaviorSubject([]); - nodeMap: Map = new Map(); + dataChange = new BehaviorSubject([]); + nodeMap = new Map(); /** The data */ - rootLevelNodes = ['Vegetables', 'Fruits']; - dataMap = new Map([ + rootLevelNodes: string[] = ['Vegetables', 'Fruits']; + dataMap = new Map([ ['Fruits', ['Apple', 'Orange', 'Banana']], ['Vegetables', ['Tomato', 'Potato', 'Onion']], ['Apple', ['Fuji', 'Macintosh']], @@ -59,7 +58,7 @@ export class LoadmoreDatabase { } /** Expand a node whose children are not loaded */ - loadMore(item: string, onlyFirstTime: boolean = false) { + loadMore(item: string, onlyFirstTime = false) { if (!this.nodeMap.has(item) || !this.dataMap.has(item)) { return; } @@ -69,7 +68,7 @@ export class LoadmoreDatabase { return; } const newChildrenNumber = parent.children!.length + this.batchNumber; - let nodes = children.slice(0, newChildrenNumber) + const nodes = children.slice(0, newChildrenNumber) .map(name => this._generateNode(name)); if (newChildrenNumber < children.length) { // Need a new load more node @@ -100,13 +99,9 @@ export class LoadmoreDatabase { providers: [LoadmoreDatabase] }) export class TreeLoadmoreExample { - - nodeMap: Map = new Map(); - + nodeMap = new Map(); treeControl: FlatTreeControl; - treeFlattener: MatTreeFlattener; - // Flat tree data source dataSource: MatTreeFlatDataSource; @@ -125,24 +120,28 @@ export class TreeLoadmoreExample { database.initialize(); } - getChildren = (node: LoadmoreNode): Observable => { return node.childrenChange; }; + getChildren = (node: LoadmoreNode): Observable => node.childrenChange; transformer = (node: LoadmoreNode, level: number) => { - if (this.nodeMap.has(node.item)) { - return this.nodeMap.get(node.item)!; + const existingNode = this.nodeMap.get(node.item); + + if (existingNode) { + return existingNode; } - let newNode = new LoadmoreFlatNode(node.item, level, node.hasChildren, node.loadMoreParentItem); + + const newNode = + new LoadmoreFlatNode(node.item, level, node.hasChildren, node.loadMoreParentItem); this.nodeMap.set(node.item, newNode); return newNode; } - getLevel = (node: LoadmoreFlatNode) => { return node.level; }; + getLevel = (node: LoadmoreFlatNode) => node.level; - isExpandable = (node: LoadmoreFlatNode) => { return node.expandable; }; + isExpandable = (node: LoadmoreFlatNode) => node.expandable; - hasChild = (_: number, _nodeData: LoadmoreFlatNode) => { return _nodeData.expandable; }; + hasChild = (_: number, _nodeData: LoadmoreFlatNode) => _nodeData.expandable; - isLoadMore = (_: number, _nodeData: LoadmoreFlatNode) => { return _nodeData.item === LOAD_MORE; }; + isLoadMore = (_: number, _nodeData: LoadmoreFlatNode) => _nodeData.item === LOAD_MORE; /** Load more nodes from data source */ loadMore(item: string) { diff --git a/src/material-examples/tree-nested-overview/tree-nested-overview-example.ts b/src/material-examples/tree-nested-overview/tree-nested-overview-example.ts index bdc37e34b6b..a6031236500 100644 --- a/src/material-examples/tree-nested-overview/tree-nested-overview-example.ts +++ b/src/material-examples/tree-nested-overview/tree-nested-overview-example.ts @@ -15,42 +15,41 @@ export class FileNode { /** * The Json tree data in string. The data could be parsed into Json object */ -const TREE_DATA = ` - { - "Documents": { - "angular": { - "src": { - "core": "ts", - "compiler": "ts" - } - }, - "material2": { - "src": { - "button": "ts", - "checkbox": "ts", - "input": "ts" - } +const TREE_DATA = JSON.stringify({ + Applications: { + Calendar: 'app', + Chrome: 'app', + Webstorm: 'app' + }, + Documents: { + angular: { + src: { + compiler: 'ts', + core: 'ts' } }, - "Downloads": { - "Tutorial": "html", - "November": "pdf", - "October": "pdf" - }, - "Pictures": { - "Sun": "png", - "Woods": "jpg", - "Photo Booth Library": { - "Contents": "dir", - "Pictures": "dir" - } - }, - "Applications": { - "Chrome": "app", - "Calendar": "app", - "Webstorm": "app" + material2: { + src: { + button: 'ts', + checkbox: 'ts', + input: 'ts' + } } - }`; + }, + Downloads: { + October: 'pdf', + November: 'pdf', + Tutorial: 'html' + }, + Pictures: { + 'Photo Booth Library': { + Contents: 'dir', + Pictures: 'dir' + }, + Sun: 'png', + Woods: 'jpg' + } +}); /** * File database, it can build a tree structured Json object from string. @@ -61,7 +60,7 @@ const TREE_DATA = ` */ @Injectable() export class FileDatabase { - dataChange: BehaviorSubject = new BehaviorSubject([]); + dataChange = new BehaviorSubject([]); get data(): FileNode[] { return this.dataChange.value; } @@ -85,22 +84,22 @@ export class FileDatabase { * Build the file structure tree. The `value` is the Json object, or a sub-tree of a Json object. * The return value is the list of `FileNode`. */ - buildFileTree(value: any, level: number): FileNode[] { - let data: any[] = []; - for (let k in value) { - let v = value[k]; - let node = new FileNode(); - node.filename = `${k}`; - if (v === null || v === undefined) { - // no action - } else if (typeof v === 'object') { - node.children = this.buildFileTree(v, level + 1); - } else { - node.type = v; + buildFileTree(obj: object, level: number): FileNode[] { + return Object.keys(obj).reduce((accumulator, key) => { + const value = obj[key]; + const node = new FileNode(); + node.filename = key; + + if (value != null) { + if (typeof value === 'object') { + node.children = this.buildFileTree(value, level + 1); + } else { + node.type = value; + } } - data.push(node); - } - return data; + + return accumulator.concat(node); + }, []); } } @@ -115,7 +114,6 @@ export class FileDatabase { }) export class TreeNestedOverviewExample { nestedTreeControl: NestedTreeControl; - nestedDataSource: MatTreeNestedDataSource; constructor(database: FileDatabase) { @@ -125,7 +123,7 @@ export class TreeNestedOverviewExample { database.dataChange.subscribe(data => this.nestedDataSource.data = data); } - private _getChildren = (node: FileNode) => { return observableOf(node.children); }; + hasNestedChild = (_: number, nodeData: FileNode) => !nodeData.type; - hasNestedChild = (_: number, nodeData: FileNode) => {return !(nodeData.type); }; + private _getChildren = (node: FileNode) => observableOf(node.children); }
{{column}} {{element[column]}} #{{ row.number }}{{row.number}} Title{{ row.title }}{{row.title}} State{{ row.state }}{{row.state}} + Created {{ row.created_at | date }}{{row.created_at | date}}