purchasing/fuse-angular
3
0
Fork 0
mirror of https://github.com/richard-loafle/fuse-angular.git synced 2026-03-08 05:28:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

Angular material docs updated,

Browse Source 
+ @angular/material-moment-adapter added to package.json
This commit is contained in:
mustafahlvc
2017-11-17 18:35:43 +03:00
parent 142fc982ca
commit 76358f996e
112 changed files with 1697 additions and 1041 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/assets/angular-material-examples/chips-input/chips-input-example.ts
View File

@@ -1,8 +1,6 @@
import { Component } from '@angular/core';
import { MatChipInputEvent } from '@angular/material';
import { ENTER } from '@angular/cdk/keycodes';
const COMMA = 188;
import { ENTER, COMMA } from '@angular/cdk/keycodes';
/**
* @title Chips with input

12
src/assets/angular-material-examples/chips-stacked/chips-stacked-example.ts
View File

@@ -13,16 +13,20 @@ export class ChipsStackedExample
color: string;
availableColors = [
{name : 'none',
{
name : 'none',
color: ''
},
{name : 'Primary',
{
name : 'Primary',
color: 'primary'
},
{name : 'Accent',
{
name : 'Accent',
color: 'accent'
},
{name : 'Warn',
{
name : 'Warn',
color: 'warn'
}
];

4
src/assets/angular-material-examples/datepicker-api/datepicker-api-example.ts
View File

@@ -1,8 +1,6 @@
import { Component } from '@angular/core';
/**
* @title Datepicker API
*/
/** @title Datepicker open method */
@Component({
selector : 'datepicker-api-example',
templateUrl: 'datepicker-api-example.html',

0
src/assets/angular-material-examples/progress-bar-overview/progress-bar-overview-example.css → src/assets/angular-material-examples/datepicker-disabled/datepicker-disabled-example.css
View File

23
src/assets/angular-material-examples/datepicker-disabled/datepicker-disabled-example.html Normal file
View File

@@ -0,0 +1,23 @@
<p>
<mat-form-field>
<input matInput [matDatepicker]="dp1" placeholder="Completely disabled" disabled>
<mat-datepicker-toggle matSuffix [for]="dp1"></mat-datepicker-toggle>
<mat-datepicker #dp1></mat-datepicker>
</mat-form-field>
</p>
<p>
<mat-form-field>
<input matInput [matDatepicker]="dp2" placeholder="Popup disabled">
<mat-datepicker-toggle matSuffix [for]="dp2" disabled></mat-datepicker-toggle>
<mat-datepicker #dp2></mat-datepicker>
</mat-form-field>
</p>
<p>
<mat-form-field>
<input matInput [matDatepicker]="dp3" placeholder="Input disabled" disabled>
<mat-datepicker-toggle matSuffix [for]="dp3"></mat-datepicker-toggle>
<mat-datepicker #dp3 disabled="false"></mat-datepicker>
</mat-form-field>
</p>

11
src/assets/angular-material-examples/datepicker-disabled/datepicker-disabled-example.ts Normal file
View File

@@ -0,0 +1,11 @@
import { Component } from '@angular/core';
/** @title Disabled datepicker */
@Component({
selector : 'datepicker-disabled-example',
templateUrl: 'datepicker-disabled-example.html',
styleUrls : ['datepicker-disabled-example.css']
})
export class DatepickerDisabledExample
{
}

6
src/assets/angular-material-examples/datepicker-events/datepicker-events-example.css Normal file
View File

@@ -0,0 +1,6 @@
.example-events {
width: 400px;
height: 200px;
border: 1px solid #555;
overflow: auto;
}

10
src/assets/angular-material-examples/datepicker-events/datepicker-events-example.html Normal file
View File

@@ -0,0 +1,10 @@
<mat-form-field>
<input matInput [matDatepicker]="picker" placeholder="Input & change events"
(dateInput)="addEvent('input', $event)" (dateChange)="addEvent('change', $event)">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
<div class="example-events">
<div *ngFor="let e of events">{{e}}</div>
</div>

18
src/assets/angular-material-examples/datepicker-events/datepicker-events-example.ts Normal file
View File

@@ -0,0 +1,18 @@
import { Component } from '@angular/core';
import { MatDatepickerInputEvent } from '@angular/material/datepicker';
/** @title Datepicker input and change events */
@Component({
selector : 'datepicker-events-example',
templateUrl: 'datepicker-events-example.html',
styleUrls : ['datepicker-events-example.css']
})
export class DatepickerEventsExample
{
events: string[] = [];
addEvent(type: string, event: MatDatepickerInputEvent<Date>)
{
this.events.push(`${type}: ${event.value}`);
}
}

4
src/assets/angular-material-examples/datepicker-filter/datepicker-filter-example.ts
View File

@@ -1,8 +1,6 @@
import { Component } from '@angular/core';
/**
* @title Datepicker Filter
*/
/** @title Datepicker with filter validation */
@Component({
selector : 'datepicker-filter-example',
templateUrl: 'datepicker-filter-example.html',

1
src/assets/angular-material-examples/datepicker-formats/datepicker-formats-example.css Normal file
View File

@@ -0,0 +1 @@
/** No CSS for this example */

5
src/assets/angular-material-examples/datepicker-formats/datepicker-formats-example.html Normal file
View File

@@ -0,0 +1,5 @@
<mat-form-field>
<input matInput [matDatepicker]="dp" placeholder="Verbose datepicker" [formControl]="date">
<mat-datepicker-toggle matSuffix [for]="dp"></mat-datepicker-toggle>
<mat-datepicker #dp></mat-datepicker>
</mat-form-field>

44
src/assets/angular-material-examples/datepicker-formats/datepicker-formats-example.ts Normal file
View File

@@ -0,0 +1,44 @@
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';
import * as moment from 'moment';
// See the Moment.js docs for the meaning of these formats:
// https://momentjs.com/docs/#/displaying/format/
export const MY_FORMATS = {
parse : {
dateInput: 'LL'
},
display: {
dateInput : 'LL',
monthYearLabel : 'MMM YYYY',
dateA11yLabel : 'LL',
monthYearA11yLabel: 'MMMM YYYY'
}
};
/** @title Datepicker with custom formats */
@Component({
selector : 'datepicker-formats-example',
templateUrl: 'datepicker-formats-example.html',
styleUrls : ['datepicker-formats-example.css'],
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
// our example generation script.
{provide : DateAdapter,
useClass: MomentDateAdapter,
deps : [MAT_DATE_LOCALE]
},
{provide : MAT_DATE_FORMATS,
useValue: MY_FORMATS
}
]
})
export class DatepickerFormatsExample
{
date = new FormControl(moment());
}

1
src/assets/angular-material-examples/datepicker-locale/datepicker-locale-example.css Normal file
View File

@@ -0,0 +1 @@
/** No CSS for this example */

7
src/assets/angular-material-examples/datepicker-locale/datepicker-locale-example.html Normal file
View File

@@ -0,0 +1,7 @@
<mat-form-field>
<input matInput [matDatepicker]="dp" placeholder="Different locale">
<mat-datepicker-toggle matSuffix [for]="dp"></mat-datepicker-toggle>
<mat-datepicker #dp></mat-datepicker>
</mat-form-field>
<button mat-button (click)="french()">Dynamically switch to French</button>

42
src/assets/angular-material-examples/datepicker-locale/datepicker-locale-example.ts Normal file
View File

@@ -0,0 +1,42 @@
import { Component } from '@angular/core';
import { MAT_MOMENT_DATE_FORMATS, MomentDateAdapter } from '@angular/material-moment-adapter';
import { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE } from '@angular/material/core';
/** @title Datepicker with different locale */
@Component({
selector : 'datepicker-locale-example',
templateUrl: 'datepicker-locale-example.html',
styleUrls : ['datepicker-locale-example.css'],
providers : [
// The locale would typically be provided on the root module of your application. We do it at
// the component level here, due to limitations of our example generation script.
{
provide : MAT_DATE_LOCALE,
useValue: 'ja-JP'
},
// `MomentDateAdapter` and `MAT_MOMENT_DATE_FORMATS` can be automatically provided by importing
// `MatMomentDateModule` in your applications root module. We provide it at the component level
// here, due to limitations of our example generation script.
{
provide : DateAdapter,
useClass: MomentDateAdapter,
deps : [MAT_DATE_LOCALE]
},
{
provide : MAT_DATE_FORMATS,
useValue: MAT_MOMENT_DATE_FORMATS
}
]
})
export class DatepickerLocaleExample
{
constructor(private adapter: DateAdapter<any>)
{
}
french()
{
this.adapter.setLocale('fr');
}
}

4
src/assets/angular-material-examples/datepicker-min-max/datepicker-min-max-example.ts
View File

@@ -1,8 +1,6 @@
import { Component } from '@angular/core';
/**
* @title Datepicker Min Max
*/
/** @title Datepicker with min & max validation */
@Component({
selector : 'datepicker-min-max-example',
templateUrl: 'datepicker-min-max-example.html',

1
src/assets/angular-material-examples/datepicker-moment/datepicker-moment-example.css Normal file
View File

@@ -0,0 +1 @@
/** No CSS for this example */

5
src/assets/angular-material-examples/datepicker-moment/datepicker-moment-example.html Normal file
View File

@@ -0,0 +1,5 @@
<mat-form-field>
<input matInput [matDatepicker]="dp" placeholder="Moment.js datepicker" [formControl]="date">
<mat-datepicker-toggle matSuffix [for]="dp"></mat-datepicker-toggle>
<mat-datepicker #dp></mat-datepicker>
</mat-form-field>

32
src/assets/angular-material-examples/datepicker-moment/datepicker-moment-example.ts Normal file
View File

@@ -0,0 +1,32 @@
import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';
import { MAT_MOMENT_DATE_FORMATS, MomentDateAdapter } from '@angular/material-moment-adapter';
import { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE } from '@angular/material/core';
import * as moment from 'moment';
/** @title Datepicker that uses Moment.js dates */
@Component({
selector : 'datepicker-moment-example',
templateUrl: 'datepicker-moment-example.html',
styleUrls : ['datepicker-moment-example.css'],
providers : [
// `MomentDateAdapter` and `MAT_MOMENT_DATE_FORMATS` can be automatically provided by importing
// `MatMomentDateModule` in your applications root module. We provide it at the component level
// here, due to limitations of our example generation script.
{
provide : DateAdapter,
useClass: MomentDateAdapter,
deps : [MAT_DATE_LOCALE]
},
{
provide : MAT_DATE_FORMATS,
useValue: MAT_MOMENT_DATE_FORMATS
}
]
})
export class DatepickerMomentExample
{
// Datepicker takes `Moment` objects instead of `Date` objects.
date = new FormControl(moment([2017, 0, 1]));
}

4
src/assets/angular-material-examples/datepicker-overview/datepicker-overview-example.ts
View File

@@ -1,8 +1,6 @@
import { Component } from '@angular/core';
/**
* @title Basic datepicker
*/
/** @title Basic datepicker */
@Component({
selector : 'datepicker-overview-example',
templateUrl: 'datepicker-overview-example.html',

4
src/assets/angular-material-examples/datepicker-start-view/datepicker-start-view-example.ts
View File

@@ -1,8 +1,6 @@
import { Component } from '@angular/core';
/**
* @title Datepicker start date
*/
/** @title Datepicker start date */
@Component({
selector : 'datepicker-start-view-example',
templateUrl: 'datepicker-start-view-example.html',

4
src/assets/angular-material-examples/datepicker-touch/datepicker-touch-example.ts
View File

@@ -1,8 +1,6 @@
import { Component } from '@angular/core';
/**
* @title Datepicker Touch
*/
/** @title Datepicker touch UI */
@Component({
selector : 'datepicker-touch-example',
templateUrl: 'datepicker-touch-example.html',

1
src/assets/angular-material-examples/datepicker-value/datepicker-value-example.css Normal file
View File

@@ -0,0 +1 @@
/** No CSS for this example */

18
src/assets/angular-material-examples/datepicker-value/datepicker-value-example.html Normal file
View File

@@ -0,0 +1,18 @@
<mat-form-field>
<input matInput [matDatepicker]="picker1" placeholder="Angular forms" [formControl]="date">
<mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
<mat-datepicker #picker1></mat-datepicker>
</mat-form-field>
<mat-form-field>
<input matInput [matDatepicker]="picker2" placeholder="Angular forms (w/ deserialization)"
[formControl]="serializedDate">
<mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle>
<mat-datepicker #picker2></mat-datepicker>
</mat-form-field>
<mat-form-field>
<input matInput [matDatepicker]="picker3" placeholder="Value binding" [value]="date.value">
<mat-datepicker-toggle matSuffix [for]="picker3"></mat-datepicker-toggle>
<mat-datepicker #picker3></mat-datepicker>
</mat-form-field>

14
src/assets/angular-material-examples/datepicker-value/datepicker-value-example.ts Normal file
View File

@@ -0,0 +1,14 @@
import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';
/** @title Datepicker selected value */
@Component({
selector : 'datepicker-value-example',
templateUrl: 'datepicker-value-example.html',
styleUrls : ['datepicker-value-example.css']
})
export class DatepickerValueExample
{
date = new FormControl(new Date());
serializedDate = new FormControl((new Date()).toISOString());
}

4
src/assets/angular-material-examples/elevation-overview/elevation-overview-example.css Normal file
View File

@@ -0,0 +1,4 @@
.example-container {
padding: 16px;
margin-bottom: 16px;
}

7
src/assets/angular-material-examples/elevation-overview/elevation-overview-example.html Normal file
View File

@@ -0,0 +1,7 @@
<div class="example-container"
[class.mat-elevation-z2]="!isActive"
[class.mat-elevation-z8]="isActive">
Example
</div>
<button mat-button (click)="isActive = !isActive">Toggle Elevation</button>

14
src/assets/angular-material-examples/elevation-overview/elevation-overview-example.ts Normal file
View File

@@ -0,0 +1,14 @@
import { Component } from '@angular/core';
/**
* @title Elevation CSS classes
*/
@Component({
selector : 'elevation-overview-example',
styleUrls : ['elevation-overview-example.css'],
templateUrl: 'elevation-overview-example.html'
})
export class ElevationOverviewExample
{
isActive = false;
}

12
src/assets/angular-material-examples/form-field-custom-control/form-field-custom-control-example.ts
View File

@@ -165,12 +165,12 @@ export class MyTelInput implements MatFormFieldControl<MyTel>, OnDestroy
@Component({
selector: 'form-field-custom-control-example',
template: `
<mat-form-field>
<my-tel-input placeholder="Phone number" required></my-tel-input>
<mat-icon matSuffix>phone</mat-icon>
<mat-hint>Include area code</mat-hint>
</mat-form-field>
`
<mat-form-field>
<my-tel-input placeholder="Phone number" required></my-tel-input>
<mat-icon matSuffix>phone</mat-icon>
<mat-hint>Include area code</mat-hint>
</mat-form-field>
`
})
export class FormFieldCustomControlExample
{

2
src/assets/angular-material-examples/form-field-theming/form-field-theming-example.html
View File

@@ -9,6 +9,6 @@
<mat-form-field [color]="options.value.color">
<input matInput type="number" placeholder="Font size (px)" formControlName="fontSize" min="10">
<mat-error *ngIf="options.get('fontSize').invalid">Min size: 10px</mat-error>
<mat-error *ngIf="options.get('fontSize')?.invalid">Min size: 10px</mat-error>
</mat-form-field>
</form>

12
src/assets/angular-material-examples/grid-list-dynamic/grid-list-dynamic-example.ts
View File

@@ -10,22 +10,26 @@ import { Component } from '@angular/core';
export class GridListDynamicExample
{
tiles = [
{text : 'One',
{
text : 'One',
cols : 3,
rows : 1,
color: 'lightblue'
},
{text : 'Two',
{
text : 'Two',
cols : 1,
rows : 2,
color: 'lightgreen'
},
{text : 'Three',
{
text : 'Three',
cols : 1,
rows : 1,
color: 'lightpink'
},
{text : 'Four',
{
text : 'Four',
cols : 2,
rows : 1,
color: '#DDBDF1'

1
src/assets/angular-material-examples/input-autosize-textarea/input-autosize-textarea-example.css Normal file
View File

@@ -0,0 +1 @@
/** No CSS for this example */

4
src/assets/angular-material-examples/input-autosize-textarea/input-autosize-textarea-example.html Normal file
View File

@@ -0,0 +1,4 @@
<mat-form-field>
<textarea matInput placeholder="Autosize textarea" matTextareaAutosize matAutosizeMinRows="2"
matAutosizeMaxRows="5"></textarea>
</mat-form-field>

11
src/assets/angular-material-examples/input-autosize-textarea/input-autosize-textarea-example.ts Normal file
View File

@@ -0,0 +1,11 @@
import { Component } from '@angular/core';
/** @title Auto-resizing textarea */
@Component({
selector : 'input-autosize-textarea-example',
templateUrl: './input-autosize-textarea-example.html',
styleUrls : ['./input-autosize-textarea-example.css']
})
export class InputAutosizeTextareaExample
{
}

2
src/assets/angular-material-examples/input-clearable/input-clearable-example.ts
View File

@@ -1,7 +1,7 @@
import { Component } from '@angular/core';
/**
* @title Input Clearable
* @title Input with a clear button
*/
@Component({
selector : 'input-clearable-example',

9
src/assets/angular-material-examples/input-error-state-matcher/input-error-state-matcher-example.css Normal file
View File

@@ -0,0 +1,9 @@
.example-form {
min-width: 150px;
max-width: 500px;
width: 100%;
}
.example-full-width {
width: 100%;
}

13
src/assets/angular-material-examples/input-error-state-matcher/input-error-state-matcher-example.html Normal file
View File

@@ -0,0 +1,13 @@
<form class="example-form">
<mat-form-field class="example-full-width">
<input matInput placeholder="Email" [formControl]="emailFormControl"
[errorStateMatcher]="matcher">
<mat-hint>Errors appear instantly!</mat-hint>
<mat-error *ngIf="emailFormControl.hasError('email') && !emailFormControl.hasError('required')">
Please enter a valid email address
</mat-error>
<mat-error *ngIf="emailFormControl.hasError('required')">
Email is <strong>required</strong>
</mat-error>
</mat-form-field>
</form>

29
src/assets/angular-material-examples/input-error-state-matcher/input-error-state-matcher-example.ts Normal file
View File

@@ -0,0 +1,29 @@
import { Component } from '@angular/core';
import { FormControl, FormGroupDirective, NgForm, Validators } from '@angular/forms';
import { ErrorStateMatcher } from '@angular/material/core';
/** Error when invalid control is dirty, touched, or submitted. */
export class MyErrorStateMatcher implements ErrorStateMatcher
{
isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean
{
const isSubmitted = form && form.submitted;
return !!(control && control.invalid && (control.dirty || control.touched || isSubmitted));
}
}
/** @title Input with a custom ErrorStateMatcher */
@Component({
selector : 'input-error-state-matcher-example',
templateUrl: './input-error-state-matcher-example.html',
styleUrls : ['./input-error-state-matcher-example.css']
})
export class InputErrorStateMatcherExample
{
emailFormControl = new FormControl('', [
Validators.required,
Validators.email
]);
matcher = new MyErrorStateMatcher();
}

2
src/assets/angular-material-examples/input-errors/input-errors-example.html
View File

@@ -1,7 +1,7 @@
<form class="example-form">
<mat-form-field class="example-full-width">
<input matInput placeholder="Email" [formControl]="emailFormControl">
<mat-error *ngIf="emailFormControl.hasError('pattern')">
<mat-error *ngIf="emailFormControl.hasError('email') && !emailFormControl.hasError('required')">
Please enter a valid email address
</mat-error>
<mat-error *ngIf="emailFormControl.hasError('required')">

8
src/assets/angular-material-examples/input-errors/input-errors-example.ts
View File

@@ -1,10 +1,8 @@
import { Component } from '@angular/core';
import { FormControl, Validators } from '@angular/forms';
const EMAIL_REGEX = /^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
/**
* @title Input Errors
* @title Input with error messages
*/
@Component({
selector : 'input-errors-example',
@@ -13,10 +11,8 @@ const EMAIL_REGEX = /^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA
})
export class InputErrorsExample
{
emailFormControl = new FormControl('', [
Validators.required,
Validators.pattern(EMAIL_REGEX)
Validators.email
]);
}

2
src/assets/angular-material-examples/input-hint/input-hint-example.ts
View File

@@ -1,7 +1,7 @@
import { Component } from '@angular/core';
/**
* @title Input hints
* @title Input with hints
*/
@Component({
selector : 'input-hint-example',

4
src/assets/angular-material-examples/input-overview/input-overview-example.html
View File

@@ -2,4 +2,8 @@
<mat-form-field class="example-full-width">
<input matInput placeholder="Favorite food" value="Sushi">
</mat-form-field>
<mat-form-field class="example-full-width">
<textarea matInput placeholder="Leave a comment"></textarea>
</mat-form-field>
</form>

2
src/assets/angular-material-examples/input-prefix-suffix/input-prefix-suffix-example.ts
View File

@@ -1,7 +1,7 @@
import { Component } from '@angular/core';
/**
* @title Input Prefixes and Suffixes
* @title Inputs with prefixes and suffixes
*/
@Component({
selector : 'input-prefix-suffix-example',

1
src/assets/angular-material-examples/progress-bar-buffer/progress-bar-buffer-example.css Normal file
View File

@@ -0,0 +1 @@
/** No CSS for this example */

1
src/assets/angular-material-examples/progress-bar-buffer/progress-bar-buffer-example.html Normal file
View File

@@ -0,0 +1 @@
<mat-progress-bar mode="buffer"></mat-progress-bar>

12
src/assets/angular-material-examples/progress-bar-buffer/progress-bar-buffer-example.ts Normal file
View File

@@ -0,0 +1,12 @@
import { Component } from '@angular/core';
/**
* @title Buffer progress-bar
*/
@Component({
selector : 'progress-bar-buffer-example',
templateUrl: 'progress-bar-buffer-example.html'
})
export class ProgressBarBufferExample
{
}

1
src/assets/angular-material-examples/progress-bar-determinate/progress-bar-determinate-example.css Normal file
View File

@@ -0,0 +1 @@
/** No CSS for this example */

1
src/assets/angular-material-examples/progress-bar-determinate/progress-bar-determinate-example.html Normal file
View File

@@ -0,0 +1 @@
<mat-progress-bar mode="determinate" value="40"></mat-progress-bar>

12
src/assets/angular-material-examples/progress-bar-determinate/progress-bar-determinate-example.ts Normal file
View File

@@ -0,0 +1,12 @@
import { Component } from '@angular/core';
/**
* @title Determinate progress-bar
*/
@Component({
selector : 'progress-bar-determinate-example',
templateUrl: 'progress-bar-determinate-example.html'
})
export class ProgressBarDeterminateExample
{
}

1
src/assets/angular-material-examples/progress-bar-indeterminate/progress-bar-indeterminate-example.css Normal file
View File

@@ -0,0 +1 @@
/** No CSS for this example */

0
src/assets/angular-material-examples/progress-bar-overview/progress-bar-overview-example.html → src/assets/angular-material-examples/progress-bar-indeterminate/progress-bar-indeterminate-example.html
View File

12
src/assets/angular-material-examples/progress-bar-indeterminate/progress-bar-indeterminate-example.ts Normal file
View File

@@ -0,0 +1,12 @@
import { Component } from '@angular/core';
/**
* @title Indeterminate progress-bar
*/
@Component({
selector : 'progress-bar-indeterminate-example',
templateUrl: 'progress-bar-indeterminate-example.html'
})
export class ProgressBarIndeterminateExample
{
}

12
src/assets/angular-material-examples/progress-bar-overview/progress-bar-overview-example.ts
View File

@@ -1,12 +0,0 @@
import { Component } from '@angular/core';
/**
* @title Basic progress-bar
*/
@Component({
selector : 'progress-bar-overview-example',
templateUrl: 'progress-bar-overview-example.html'
})
export class ProgressBarOverviewExample
{
}

1
src/assets/angular-material-examples/progress-bar-query/progress-bar-query-example.css Normal file
View File

@@ -0,0 +1 @@
/** No CSS for this example */

1
src/assets/angular-material-examples/progress-bar-query/progress-bar-query-example.html Normal file
View File

@@ -0,0 +1 @@
<mat-progress-bar mode="query"></mat-progress-bar>

12
src/assets/angular-material-examples/progress-bar-query/progress-bar-query-example.ts Normal file
View File

@@ -0,0 +1,12 @@
import { Component } from '@angular/core';
/**
* @title Query progress-bar
*/
@Component({
selector : 'progress-bar-query-example',
templateUrl: 'progress-bar-query-example.html'
})
export class ProgressBarQueryExample
{
}

4
src/assets/angular-material-examples/select-custom-trigger/select-custom-trigger-example.css Normal file
View File

@@ -0,0 +1,4 @@
.example-additional-selection {
opacity: 0.75;
font-size: 0.75em;
}

11
src/assets/angular-material-examples/select-custom-trigger/select-custom-trigger-example.html Normal file
View File

@@ -0,0 +1,11 @@
<mat-form-field>
<mat-select placeholder="Toppings" [formControl]="toppings" multiple>
<mat-select-trigger>
{{toppings.value ? toppings.value[0] : ''}}
<span *ngIf="toppings.value?.length > 1" class="example-additional-selection">
(+{{toppings.value.length - 1}} others)
</span>
</mat-select-trigger>
<mat-option *ngFor="let topping of toppingList" [value]="topping">{{topping}}</mat-option>
</mat-select>
</mat-form-field>

15
src/assets/angular-material-examples/select-custom-trigger/select-custom-trigger-example.ts Normal file
View File

@@ -0,0 +1,15 @@
import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';
/** @title Select with custom trigger text */
@Component({
selector : 'select-custom-trigger-example',
templateUrl: 'select-custom-trigger-example.html',
styleUrls : ['select-custom-trigger-example.css']
})
export class SelectCustomTriggerExample
{
toppings = new FormControl();
toppingList = ['Extra cheese', 'Mushroom', 'Onion', 'Pepperoni', 'Sausage', 'Tomato'];
}

1
src/assets/angular-material-examples/select-disabled/select-disabled-example.css Normal file
View File

@@ -0,0 +1 @@
/** No CSS for this example */

12
src/assets/angular-material-examples/select-disabled/select-disabled-example.html Normal file
View File

@@ -0,0 +1,12 @@
<p>
<mat-checkbox [formControl]="disableSelect">Disable select</mat-checkbox>
</p>
<p>
<mat-form-field>
<mat-select placeholder="Choose an option" [disabled]="disableSelect.value">
<mat-option value="option1">Option 1</mat-option>
<mat-option value="option2" disabled>Option 2 (disabled)</mat-option>
<mat-option value="option3">Option 3</mat-option>
</mat-select>
</mat-form-field>
</p>

13
src/assets/angular-material-examples/select-disabled/select-disabled-example.ts Normal file
View File

@@ -0,0 +1,13 @@
import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';
/** @title Disabled select */
@Component({
selector : 'select-disabled-example',
templateUrl: 'select-disabled-example.html',
styleUrls : ['select-disabled-example.css']
})
export class SelectDisabledExample
{
disableSelect = new FormControl(false);
}

1
src/assets/angular-material-examples/select-error-state-matcher/select-error-state-matcher-example.css Normal file
View File

@@ -0,0 +1 @@
/** No CSS for this example */

12
src/assets/angular-material-examples/select-error-state-matcher/select-error-state-matcher-example.html Normal file
View File

@@ -0,0 +1,12 @@
<mat-form-field>
<mat-select placeholder="Choose one" [formControl]="selected" [errorStateMatcher]="matcher">
<mat-option>Clear</mat-option>
<mat-option value="valid">Valid option</mat-option>
<mat-option value="invalid">Invalid option</mat-option>
</mat-select>
<mat-hint>Errors appear instantly!</mat-hint>
<mat-error *ngIf="selected.hasError('required')">You must make a selection</mat-error>
<mat-error *ngIf="selected.hasError('pattern') && !selected.hasError('required')">
Your selection is invalid
</mat-error>
</mat-form-field>

29
src/assets/angular-material-examples/select-error-state-matcher/select-error-state-matcher-example.ts Normal file
View File

@@ -0,0 +1,29 @@
import { Component } from '@angular/core';
import { FormControl, FormGroupDirective, NgForm, Validators } from '@angular/forms';
import { ErrorStateMatcher } from '@angular/material/core';
/** Error when invalid control is dirty, touched, or submitted. */
export class MyErrorStateMatcher implements ErrorStateMatcher
{
isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean
{
const isSubmitted = form && form.submitted;
return !!(control && control.invalid && (control.dirty || control.touched || isSubmitted));
}
}
/** @title Select with a custom ErrorStateMatcher */
@Component({
selector : 'select-error-state-matcher-example',
templateUrl: 'select-error-state-matcher-example.html',
styleUrls : ['select-error-state-matcher-example.css']
})
export class SelectErrorStateMatcherExample
{
selected = new FormControl('valid', [
Validators.required,
Validators.pattern('valid')
]);
matcher = new MyErrorStateMatcher();
}

12
src/assets/angular-material-examples/select-form/select-form-example.ts
View File

@@ -5,20 +5,24 @@ import { Component } from '@angular/core';
*/
@Component({
selector : 'select-form-example',
templateUrl: 'select-form-example.html'
templateUrl: 'select-form-example.html',
styleUrls : ['select-form-example.css']
})
export class SelectFormExample
{
selectedValue: string;
foods = [
{value : 'steak-0',
{
value : 'steak-0',
viewValue: 'Steak'
},
{value : 'pizza-1',
{
value : 'pizza-1',
viewValue: 'Pizza'
},
{value : 'tacos-2',
{
value : 'tacos-2',
viewValue: 'Tacos'
}
];

1
src/assets/angular-material-examples/select-hint-error/select-hint-error-example.css Normal file
View File

@@ -0,0 +1 @@
/** No CSS for this example */

10
src/assets/angular-material-examples/select-hint-error/select-hint-error-example.html Normal file
View File

@@ -0,0 +1,10 @@
<mat-form-field>
<mat-select placeholder="Favorite animal" [formControl]="animalControl" required>
<mat-option>--</mat-option>
<mat-option *ngFor="let animal of animals" [value]="animal">
{{animal.name}}
</mat-option>
</mat-select>
<mat-error *ngIf="animalControl.hasError('required')">Please choose an animal</mat-error>
<mat-hint>{{animalControl.value?.sound}}</mat-hint>
</mat-form-field>

32
src/assets/angular-material-examples/select-hint-error/select-hint-error-example.ts Normal file
View File

@@ -0,0 +1,32 @@
import { Component } from '@angular/core';
import { FormControl, Validators } from '@angular/forms';
/** @title Select with form field features */
@Component({
selector : 'select-hint-error-example',
templateUrl: 'select-hint-error-example.html',
styleUrls : ['select-hint-error-example.css']
})
export class SelectHintErrorExample
{
animalControl = new FormControl('', [Validators.required]);
animals = [
{
name : 'Dog',
sound: 'Woof!'
},
{
name : 'Cat',
sound: 'Meow!'
},
{
name : 'Cow',
sound: 'Moo!'
},
{
name : 'Fox',
sound: 'Wa-pa-pa-pa-pa-pa-pow!'
}
];
}

1
src/assets/angular-material-examples/select-multiple/select-multiple-example.css Normal file
View File

@@ -0,0 +1 @@
/** No CSS for this example */

5
src/assets/angular-material-examples/select-multiple/select-multiple-example.html Normal file
View File

@@ -0,0 +1,5 @@
<mat-form-field>
<mat-select placeholder="Toppings" [formControl]="toppings" multiple>
<mat-option *ngFor="let topping of toppingList" [value]="topping">{{topping}}</mat-option>
</mat-select>
</mat-form-field>

15
src/assets/angular-material-examples/select-multiple/select-multiple-example.ts Normal file
View File

@@ -0,0 +1,15 @@
import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';
/** @title Select with multiple selection */
@Component({
selector : 'select-multiple-example',
templateUrl: 'select-multiple-example.html',
styleUrls : ['select-multiple-example.css']
})
export class SelectMultipleExample
{
toppings = new FormControl();
toppingList = ['Extra cheese', 'Mushroom', 'Onion', 'Pepperoni', 'Sausage', 'Tomato'];
}

1
src/assets/angular-material-examples/select-no-ripple/select-no-ripple-example.css Normal file
View File

@@ -0,0 +1 @@
/** No CSS for this example */

7
src/assets/angular-material-examples/select-no-ripple/select-no-ripple-example.html Normal file
View File

@@ -0,0 +1,7 @@
<mat-form-field>
<mat-select placeholder="Select an option" disableRipple>
<mat-option value="1">Option 1</mat-option>
<mat-option value="2">Option 2</mat-option>
<mat-option value="3">Option 3</mat-option>
</mat-select>
</mat-form-field>

11
src/assets/angular-material-examples/select-no-ripple/select-no-ripple-example.ts Normal file
View File

@@ -0,0 +1,11 @@
import { Component } from '@angular/core';
/** @title Select with no option ripple */
@Component({
selector : 'select-no-ripple-example',
templateUrl: 'select-no-ripple-example.html',
styleUrls : ['select-no-ripple-example.css']
})
export class SelectNoRippleExample
{
}

1
src/assets/angular-material-examples/select-optgroup/select-optgroup-example.css Normal file
View File

@@ -0,0 +1 @@
/** No CSS for this example */

11
src/assets/angular-material-examples/select-optgroup/select-optgroup-example.html Normal file
View File

@@ -0,0 +1,11 @@
<mat-form-field>
<mat-select placeholder="Pokemon" [formControl]="pokemonControl">
<mat-option>-- None --</mat-option>
<mat-optgroup *ngFor="let group of pokemonGroups" [label]="group.name"
[disabled]="group.disabled">
<mat-option *ngFor="let pokemon of group.pokemon" [value]="pokemon.value">
{{ pokemon.viewValue }}
</mat-option>
</mat-optgroup>
</mat-select>
</mat-form-field>

81
src/assets/angular-material-examples/select-optgroup/select-optgroup-example.ts Normal file
View File

@@ -0,0 +1,81 @@
import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';
/** @title Select with option groups */
@Component({
selector : 'select-optgroup-example',
templateUrl: 'select-optgroup-example.html',
styleUrls : ['select-optgroup-example.css']
})
export class SelectOptgroupExample
{
pokemonControl = new FormControl();
pokemonGroups = [
{
name : 'Grass',
pokemon: [
{
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'
}
]
},
{
name : 'Fire',
disabled: true,
pokemon : [
{
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'
}
]
}
];
}

12
src/assets/angular-material-examples/select-overview/select-overview-example.ts
View File

@@ -5,18 +5,22 @@ import { Component } from '@angular/core';
*/
@Component({
selector : 'select-overview-example',
templateUrl: 'select-overview-example.html'
templateUrl: 'select-overview-example.html',
styleUrls : ['select-overview-example.css']
})
export class SelectOverviewExample
{
foods = [
{value : 'steak-0',
{
value : 'steak-0',
viewValue: 'Steak'
},
{value : 'pizza-1',
{
value : 'pizza-1',
viewValue: 'Pizza'
},
{value : 'tacos-2',
{
value : 'tacos-2',
viewValue: 'Tacos'
}
];

11
src/assets/angular-material-examples/select-panel-class/select-panel-class-example.css Normal file
View File

@@ -0,0 +1,11 @@
.example-panel-red .mat-select-content {
background: rgba(255, 0, 0, 0.5);
}
.example-panel-green .mat-select-content {
background: rgba(0, 255, 0, 0.5);
}
.example-panel-blue .mat-select-content {
background: rgba(0, 0, 255, 0.5);
}

8
src/assets/angular-material-examples/select-panel-class/select-panel-class-example.html Normal file
View File

@@ -0,0 +1,8 @@
<mat-form-field>
<mat-select placeholder="Panel color" [formControl]="panelColor"
panelClass="example-panel-{{panelColor.value}}">
<mat-option value="red">Red</mat-option>
<mat-option value="green">Green</mat-option>
<mat-option value="blue">Blue</mat-option>
</mat-select>
</mat-form-field>

16
src/assets/angular-material-examples/select-panel-class/select-panel-class-example.ts Normal file
View File

@@ -0,0 +1,16 @@
import { Component, ViewEncapsulation } from '@angular/core';
import { FormControl } from '@angular/forms';
/**
* @title Select with custom panel styling
*/
@Component({
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');
}

1
src/assets/angular-material-examples/select-reset/select-reset-example.css Normal file
View File

@@ -0,0 +1 @@
/** No CSS for this example */

6
src/assets/angular-material-examples/select-reset/select-reset-example.html Normal file
View File

@@ -0,0 +1,6 @@
<mat-form-field>
<mat-select placeholder="State">
<mat-option>None</mat-option>
<mat-option *ngFor="let state of states" [value]="state">{{state}}</mat-option>
</mat-select>
</mat-form-field>

20
src/assets/angular-material-examples/select-reset/select-reset-example.ts Normal file
View File

@@ -0,0 +1,20 @@
import { Component } from '@angular/core';
/** @title Select with reset option */
@Component({
selector : 'select-reset-example',
templateUrl: 'select-reset-example.html',
styleUrls : ['select-reset-example.css']
})
export class SelectResetExample
{
states = [
'Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware',
'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky',
'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi',
'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire', 'New Jersey', 'New Mexico',
'New York', 'North Carolina', 'North Dakota', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania',
'Rhode Island', 'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont',
'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'
];
}

1
src/assets/angular-material-examples/select-value-binding/select-value-binding-example.css Normal file
View File

@@ -0,0 +1 @@
/** No CSS for this example */

10
src/assets/angular-material-examples/select-value-binding/select-value-binding-example.html Normal file
View File

@@ -0,0 +1,10 @@
<mat-form-field>
<mat-select [(value)]="selected">
<mat-option>None</mat-option>
<mat-option value="option1">Option 1</mat-option>
<mat-option value="option2">Option 2</mat-option>
<mat-option value="option3">Option 3</mat-option>
</mat-select>
</mat-form-field>
<p>You selected: {{selected}}</p>

12
src/assets/angular-material-examples/select-value-binding/select-value-binding-example.ts Normal file
View File

@@ -0,0 +1,12 @@
import { Component } from '@angular/core';
/** @title Select with 2-way value binding */
@Component({
selector : 'select-value-binding-example',
templateUrl: 'select-value-binding-example.html',
styleUrls : ['select-value-binding-example.css']
})
export class SelectValueBindingExample
{
selected = 'option2';
}

15
src/assets/angular-material-examples/sort-overview/sort-overview-example.ts
View File

@@ -12,31 +12,36 @@ import { Sort } from '@angular/material';
export class SortOverviewExample
{
desserts = [
{name : 'Frozen yogurt',
{
name : 'Frozen yogurt',
calories: '159',
fat : '6',
carbs : '24',
protein : '4'
},
{name : 'Ice cream sandwich',
{
name : 'Ice cream sandwich',
calories: '237',
fat : '9',
carbs : '37',
protein : '4'
},
{name : 'Eclair',
{
name : 'Eclair',
calories: '262',
fat : '16',
carbs : '24',
protein : '6'
},
{name : 'Cupcake',
{
name : 'Cupcake',
calories: '305',
fat : '4',
carbs : '67',
protein : '4'
},
{name : 'Gingerbread',
{
name : 'Gingerbread',
calories: '356',
fat : '16',
carbs : '49',

207
src/assets/angular-material-examples/table-basic/table-basic-example.ts
View File

@@ -1,7 +1,5 @@
import { Component } from '@angular/core';
import { DataSource } from '@angular/cdk/collections';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';
import { MatTableDataSource } from '@angular/material';
/**
* @title Basic table
@@ -14,7 +12,7 @@ import 'rxjs/add/observable/of';
export class TableBasicExample
{
displayedColumns = ['position', 'name', 'weight', 'symbol'];
dataSource = new ExampleDataSource();
dataSource = new MatTableDataSource<Element>(ELEMENT_DATA);
}
export interface Element
@@ -25,124 +23,125 @@ export interface Element
symbol: string;
}
const data: Element[] = [
{position : 1,
name : 'Hydrogen',
weight: 1.0079,
symbol: 'H'
const ELEMENT_DATA: Element[] = [
{
position: 1,
name : 'Hydrogen',
weight : 1.0079,
symbol : 'H'
},
{position : 2,
name : 'Helium',
weight: 4.0026,
symbol: 'He'
{
position: 2,
name : 'Helium',
weight : 4.0026,
symbol : 'He'
},
{position : 3,
name : 'Lithium',
weight: 6.941,
symbol: 'Li'
{
position: 3,
name : 'Lithium',
weight : 6.941,
symbol : 'Li'
},
{position : 4,
name : 'Beryllium',
weight: 9.0122,
symbol: 'Be'
{
position: 4,
name : 'Beryllium',
weight : 9.0122,
symbol : 'Be'
},
{position : 5,
name : 'Boron',
weight: 10.811,
symbol: 'B'
{
position: 5,
name : 'Boron',
weight : 10.811,
symbol : 'B'
},
{position : 6,
name : 'Carbon',
weight: 12.0107,
symbol: 'C'
{
position: 6,
name : 'Carbon',
weight : 12.0107,
symbol : 'C'
},
{position : 7,
name : 'Nitrogen',
weight: 14.0067,
symbol: 'N'
{
position: 7,
name : 'Nitrogen',
weight : 14.0067,
symbol : 'N'
},
{position : 8,
name : 'Oxygen',
weight: 15.9994,
symbol: 'O'
{
position: 8,
name : 'Oxygen',
weight : 15.9994,
symbol : 'O'
},
{position : 9,
name : 'Fluorine',
weight: 18.9984,
symbol: 'F'
{
position: 9,
name : 'Fluorine',
weight : 18.9984,
symbol : 'F'
},
{position : 10,
name : 'Neon',
weight: 20.1797,
symbol: 'Ne'
{
position: 10,
name : 'Neon',
weight : 20.1797,
symbol : 'Ne'
},
{position : 11,
name : 'Sodium',
weight: 22.9897,
symbol: 'Na'
{
position: 11,
name : 'Sodium',
weight : 22.9897,
symbol : 'Na'
},
{position : 12,
name : 'Magnesium',
weight: 24.305,
symbol: 'Mg'
{
position: 12,
name : 'Magnesium',
weight : 24.305,
symbol : 'Mg'
},
{position : 13,
name : 'Aluminum',
weight: 26.9815,
symbol: 'Al'
{
position: 13,
name : 'Aluminum',
weight : 26.9815,
symbol : 'Al'
},
{position : 14,
name : 'Silicon',
weight: 28.0855,
symbol: 'Si'
{
position: 14,
name : 'Silicon',
weight : 28.0855,
symbol : 'Si'
},
{position : 15,
name : 'Phosphorus',
weight: 30.9738,
symbol: 'P'
{
position: 15,
name : 'Phosphorus',
weight : 30.9738,
symbol : 'P'
},
{position : 16,
name : 'Sulfur',
weight: 32.065,
symbol: 'S'
{
position: 16,
name : 'Sulfur',
weight : 32.065,
symbol : 'S'
},
{position : 17,
name : 'Chlorine',
weight: 35.453,
symbol: 'Cl'
{
position: 17,
name : 'Chlorine',
weight : 35.453,
symbol : 'Cl'
},
{position : 18,
name : 'Argon',
weight: 39.948,
symbol: 'Ar'
{
position: 18,
name : 'Argon',
weight : 39.948,
symbol : 'Ar'
},
{position : 19,
name : 'Potassium',
weight: 39.0983,
symbol: 'K'
{
position: 19,
name : 'Potassium',
weight : 39.0983,
symbol : 'K'
},
{position : 20,
name : 'Calcium',
weight: 40.078,
symbol: 'Ca'
{
position: 20,
name : 'Calcium',
weight : 40.078,
symbol : 'Ca'
}
];
/**
* Data source to provide what data should be rendered in the table. The observable provided
* in connect should emit exactly the data that should be rendered by the table. If the data is
* altered, the observable should emit that new set of data on the stream. In our case here,
* we return a stream that contains only one set of data that doesn't change.
*/
export class ExampleDataSource extends DataSource<any>
{
/** Connect function called by the table to retrieve one stream containing the data to render. */
connect(): Observable<Element[]>
{
return Observable.of(data);
}
disconnect()
{
}
}

7
src/assets/angular-material-examples/table-filtering/table-filtering-example.css
View File

@@ -7,17 +7,12 @@
.example-header {
min-height: 64px;
display: flex;
align-items: baseline;
padding: 8px 24px 0;
font-size: 20px;
justify-content: space-between;
}
.mat-form-field {
font-size: 14px;
flex-grow: 1;
margin-left: 32px;
width: 100%;
}
.mat-table {

37
src/assets/angular-material-examples/table-filtering/table-filtering-example.html
View File

@@ -1,37 +1,34 @@
<div class="example-container mat-elevation-z8">
<div class="example-header">
<mat-form-field floatPlaceholder="never">
<input matInput #filter placeholder="Filter users">
<mat-form-field>
<input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
</mat-form-field>
</div>
<mat-table #table [dataSource]="dataSource">
<!--- Note that these columns can be defined in any order.
The actual rendered columns are set as a property on the row definition" -->
<!-- ID Column -->
<ng-container matColumnDef="userId">
<mat-header-cell *matHeaderCellDef> ID</mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.id}}</mat-cell>
</ng-container>
<!-- Progress Column -->
<ng-container matColumnDef="progress">
<mat-header-cell *matHeaderCellDef> Progress</mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.progress}}%</mat-cell>
<!-- Position Column -->
<ng-container matColumnDef="position">
<mat-header-cell *matHeaderCellDef> No.</mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.position}}</mat-cell>
</ng-container>
<!-- Name Column -->
<ng-container matColumnDef="userName">
<ng-container matColumnDef="name">
<mat-header-cell *matHeaderCellDef> Name</mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.name}}</mat-cell>
<mat-cell *matCellDef="let element"> {{element.name}}</mat-cell>
</ng-container>
<!-- Weight Column -->
<ng-container matColumnDef="weight">
<mat-header-cell *matHeaderCellDef> Weight</mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.weight}}</mat-cell>
</ng-container>
<!-- Color Column -->
<ng-container matColumnDef="color">
<mat-header-cell *matHeaderCellDef> Color</mat-header-cell>
<mat-cell *matCellDef="let row" [style.color]="row.color"> {{row.color}}</mat-cell>
<ng-container matColumnDef="symbol">
<mat-header-cell *matHeaderCellDef> Symbol</mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.symbol}}</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>

246
src/assets/angular-material-examples/table-filtering/table-filtering-example.ts
View File

@@ -1,13 +1,5 @@
import { Component, ElementRef, ViewChild } from '@angular/core';
import { DataSource } from '@angular/cdk/collections';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/startWith';
import 'rxjs/add/observable/merge';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/distinctUntilChanged';
import 'rxjs/add/observable/fromEvent';
import { Component } from '@angular/core';
import { MatTableDataSource } from '@angular/material';
/**
* @title Table with filtering
@@ -19,134 +11,144 @@ import 'rxjs/add/observable/fromEvent';
})
export class TableFilteringExample
{
displayedColumns = ['userId', 'userName', 'progress', 'color'];
exampleDatabase = new ExampleDatabase();
dataSource: ExampleDataSource | null;
displayedColumns = ['position', 'name', 'weight', 'symbol'];
dataSource = new MatTableDataSource(ELEMENT_DATA);
@ViewChild('filter') filter: ElementRef;
ngOnInit()
applyFilter(filterValue: string)
{
this.dataSource = new ExampleDataSource(this.exampleDatabase);
Observable.fromEvent(this.filter.nativeElement, 'keyup')
.debounceTime(150)
.distinctUntilChanged()
.subscribe(() => {
if ( !this.dataSource )
{
return;
}
this.dataSource.filter = this.filter.nativeElement.value;
});
filterValue = filterValue.trim(); // Remove whitespace
filterValue = filterValue.toLowerCase(); // MatTableDataSource defaults to lowercase matches
this.dataSource.filter = filterValue;
}
}
/** 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
export interface Element
{
id: string;
name: string;
progress: string;
color: string;
position: number;
weight: number;
symbol: string;
}
/** An example database that the data source uses to retrieve data for the table. */
export class ExampleDatabase
{
/** Stream that emits whenever the data has been modified. */
dataChange: BehaviorSubject<UserData[]> = new BehaviorSubject<UserData[]>([]);
get data(): UserData[]
const ELEMENT_DATA: Element[] = [
{
return this.dataChange.value;
}
constructor()
position: 1,
name : 'Hydrogen',
weight : 1.0079,
symbol : 'H'
},
{
// Fill up the database with 100 users.
for ( let i = 0; i < 100; i++ )
{
this.addUser();
}
}
/** Adds a new user to the database. */
addUser()
position: 2,
name : 'Helium',
weight : 4.0026,
symbol : 'He'
},
{
const copiedData = this.data.slice();
copiedData.push(this.createNewUser());
this.dataChange.next(copiedData);
}
/** Builds and returns a new User. */
private createNewUser()
position: 3,
name : 'Lithium',
weight : 6.941,
symbol : 'Li'
},
{
const name =
NAMES[Math.round(Math.random() * (NAMES.length - 1))] + ' ' +
NAMES[Math.round(Math.random() * (NAMES.length - 1))].charAt(0) + '.';
return {
id : (this.data.length + 1).toString(),
name : name,
progress: Math.round(Math.random() * 100).toString(),
color : COLORS[Math.round(Math.random() * (COLORS.length - 1))]
};
}
}
/**
* 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
* to a common data base, ExampleDatabase. It is not the data source's responsibility to manage
* the underlying data. Instead, it only needs to take the data and send the table exactly what
* should be rendered.
*/
export class ExampleDataSource extends DataSource<any>
{
_filterChange = new BehaviorSubject('');
get filter(): string
position: 4,
name : 'Beryllium',
weight : 9.0122,
symbol : 'Be'
},
{
return this._filterChange.value;
}
set filter(filter: string)
position: 5,
name : 'Boron',
weight : 10.811,
symbol : 'B'
},
{
this._filterChange.next(filter);
}
constructor(private _exampleDatabase: ExampleDatabase)
position: 6,
name : 'Carbon',
weight : 12.0107,
symbol : 'C'
},
{
super();
}
/** Connect function called by the table to retrieve one stream containing the data to render. */
connect(): Observable<UserData[]>
position: 7,
name : 'Nitrogen',
weight : 14.0067,
symbol : 'N'
},
{
const displayDataChanges = [
this._exampleDatabase.dataChange,
this._filterChange
];
return Observable.merge(...displayDataChanges).map(() => {
return this._exampleDatabase.data.slice().filter((item: UserData) => {
let searchStr = (item.name + item.color).toLowerCase();
return searchStr.indexOf(this.filter.toLowerCase()) != -1;
});
});
}
disconnect()
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'
},
{
position: 11,
name : 'Sodium',
weight : 22.9897,
symbol : 'Na'
},
{
position: 12,
name : 'Magnesium',
weight : 24.305,
symbol : 'Mg'
},
{
position: 13,
name : 'Aluminum',
weight : 26.9815,
symbol : 'Al'
},
{
position: 14,
name : 'Silicon',
weight : 28.0855,
symbol : 'Si'
},
{
position: 15,
name : 'Phosphorus',
weight : 30.9738,
symbol : 'P'
},
{
position: 16,
name : 'Sulfur',
weight : 32.065,
symbol : 'S'
},
{
position: 17,
name : 'Chlorine',
weight : 35.453,
symbol : 'Cl'
},
{
position: 18,
name : 'Argon',
weight : 39.948,
symbol : 'Ar'
},
{
position: 19,
name : 'Potassium',
weight : 39.0983,
symbol : 'K'
},
{
position: 20,
name : 'Calcium',
weight : 40.078,
symbol : 'Ca'
}
}
];

27
src/assets/angular-material-examples/table-http/table-http-example.css
View File

@@ -20,23 +20,6 @@
min-height: 300px;
}
.mat-column-title {
text-overflow: ellipsis;
white-space: nowrap;
flex: 1;
overflow: hidden;
}
/* Column Widths */
.mat-column-number,
.mat-column-state {
max-width: 64px;
}
.mat-column-created {
max-width: 124px;
}
.example-loading-shade {
position: absolute;
top: 0;
@@ -55,3 +38,13 @@
max-width: 360px;
text-align: center;
}
/* Column Widths */
.mat-column-number,
.mat-column-state {
max-width: 64px;
}
.mat-column-created {
max-width: 124px;
}

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

@@ -1,14 +1,14 @@
<div class="example-container mat-elevation-z8">
<div class="example-loading-shade"
*ngIf="dataSource.isLoadingResults || dataSource.isRateLimitReached">
<mat-spinner *ngIf="dataSource.isLoadingResults"></mat-spinner>
<div class="example-rate-limit-reached" *ngIf="dataSource.isRateLimitReached">
*ngIf="isLoadingResults || isRateLimitReached">
<mat-spinner *ngIf="isLoadingResults"></mat-spinner>
<div class="example-rate-limit-reached" *ngIf="isRateLimitReached">
GitHub's API rate limit has been reached. It will be reset in one minute.
</div>
</div>
<mat-table #table [dataSource]="dataSource" class="example-table"
matSort matSortActive="created_at" matSortDisableClear matSortDirection="asc">
matSort matSortActive="created" matSortDisableClear matSortDirection="asc">
<!--- Note that these columns can be defined in any order.
The actual rendered columns are set as a property on the row definition" -->
@@ -32,7 +32,7 @@
</ng-container>
<!-- Created Column -->
<ng-container matColumnDef="created_at">
<ng-container matColumnDef="created">
<mat-header-cell *matHeaderCellDef
mat-sort-header
disableClear="true">
@@ -45,7 +45,6 @@
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>
<mat-paginator [length]="dataSource.resultsLength"
[pageSize]="30">
<mat-paginator [length]="resultsLength" [pageSize]="30">
</mat-paginator>
</div>

124
src/assets/angular-material-examples/table-http/table-http-example.ts
View File

@@ -1,7 +1,6 @@
import { Component, OnInit, ViewChild } from '@angular/core';
import { Http } from '@angular/http';
import { DataSource } from '@angular/cdk/collections';
import { MatPaginator, MatSort } from '@angular/material';
import { Component, AfterViewInit, ViewChild } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { MatPaginator, MatSort, MatTableDataSource } from '@angular/material';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/merge';
import 'rxjs/add/observable/of';
@@ -18,24 +17,56 @@ import 'rxjs/add/operator/switchMap';
styleUrls : ['table-http-example.css'],
templateUrl: 'table-http-example.html'
})
export class TableHttpExample implements OnInit
export class TableHttpExample implements AfterViewInit
{
displayedColumns = ['created_at', 'state', 'number', 'title'];
displayedColumns = ['created', 'state', 'number', 'title'];
exampleDatabase: ExampleHttpDao | null;
dataSource: ExampleDataSource | null;
dataSource = new MatTableDataSource();
resultsLength = 0;
isLoadingResults = false;
isRateLimitReached = false;
@ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild(MatSort) sort: MatSort;
constructor(private http: Http)
constructor(private http: HttpClient)
{
}
ngOnInit()
ngAfterViewInit()
{
this.exampleDatabase = new ExampleHttpDao(this.http);
this.dataSource = new ExampleDataSource(
this.exampleDatabase!, this.paginator, this.sort);
// If the user changes the sort order, reset back to the first page.
this.sort.sortChange.subscribe(() => this.paginator.pageIndex = 0);
Observable.merge(this.sort.sortChange, this.paginator.page)
.startWith(null)
.switchMap(() => {
setTimeout(() => {
this.isLoadingResults = true;
});
return this.exampleDatabase!.getRepoIssues(
this.sort.active, this.sort.direction, this.paginator.pageIndex);
})
.map(data => {
// Flip flag to show that loading has finished.
this.isLoadingResults = false;
this.isRateLimitReached = false;
this.resultsLength = data.total_count;
return data.items;
})
.catch(() => {
setTimeout(() => {
this.isLoadingResults = false;
// Catch if the GitHub API has reached its rate limit. Return empty data.
this.isRateLimitReached = true;
});
return Observable.of([]);
})
.subscribe(data => this.dataSource.data = data);
}
}
@@ -56,7 +87,7 @@ export interface GithubIssue
/** An example database that the data source uses to retrieve data for the table. */
export class ExampleHttpDao
{
constructor(private http: Http)
constructor(private http: HttpClient)
{
}
@@ -66,73 +97,6 @@ export class ExampleHttpDao
const requestUrl =
`${href}?q=repo:angular/material2&sort=${sort}&order=${order}&page=${page + 1}`;
return this.http.get(requestUrl)
.map(response => response.json() as GithubApi);
}
}
/**
* 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
* to a common data base, ExampleHttpDao. It is not the data source's responsibility to manage
* the underlying data. Instead, it only needs to take the data and send the table exactly what
* should be rendered.
*/
export class ExampleDataSource extends DataSource<GithubIssue>
{
// The number of issues returned by github matching the query.
resultsLength = 0;
isLoadingResults = false;
isRateLimitReached = false;
constructor(
private exampleDatabase: ExampleHttpDao,
private paginator: MatPaginator,
private sort: MatSort
)
{
super();
}
/** Connect function called by the table to retrieve one stream containing the data to render. */
connect(): Observable<GithubIssue[]>
{
const displayDataChanges = [
this.sort.sortChange,
this.paginator.page
];
// If the user changes the sort order, reset back to the first page.
this.sort.sortChange.subscribe(() => this.paginator.pageIndex = 0);
return Observable.merge(...displayDataChanges)
.startWith(null)
.switchMap(() => {
setTimeout(() => {
this.isLoadingResults = true;
});
return this.exampleDatabase.getRepoIssues(
this.sort.active, this.sort.direction, this.paginator.pageIndex);
})
.map(data => {
// Flip flag to show that loading has finished.
this.isLoadingResults = false;
this.isRateLimitReached = false;
this.resultsLength = data.total_count;
return data.items;
})
.catch(() => {
// Catch if the GitHub API has reached its rate limit. Return empty data.
setTimeout(() => {
this.isLoadingResults = false;
this.isRateLimitReached = true;
});
return Observable.of([]);
});
}
disconnect()
{
return this.http.get<GithubApi>(requestUrl);
}
}

37
src/assets/angular-material-examples/table-overview/table-overview-example.css
View File

@@ -1,4 +1,3 @@
/* Structure */
.example-container {
display: flex;
flex-direction: column;
@@ -6,45 +5,13 @@
}
.example-header {
min-height: 56px;
max-height: 56px;
display: flex;
align-items: center;
min-height: 64px;
padding: 8px 24px 0;
font-size: 20px;
justify-content: space-between;
border-bottom: 1px solid transparent;
}
.mat-form-field {
font-size: 14px;
flex-grow: 1;
margin-top: 8px;
}
.example-no-results {
display: flex;
justify-content: center;
padding: 24px;
font-size: 12px;
font-style: italic;
}
/** Selection styles */
.example-selection-header {
font-size: 18px;
}
.mat-column-select {
max-width: 54px;
}
.mat-row:hover, .example-selected-row {
background: #F5F5F5;
}
.mat-row:active, .mat-row.example-selected-row {
background: #EAEAEA;
width: 100%;
}
.mat-table {

53
src/assets/angular-material-examples/table-overview/table-overview-example.html
View File

@@ -1,40 +1,15 @@
<div class="example-header" [style.display]="selection.isEmpty() ? '' : 'none'">
<mat-form-field floatPlaceholder="never">
<input matInput #filter placeholder="Filter users">
<div class="example-header">
<mat-form-field>
<input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
</mat-form-field>
</div>
<div class="example-header example-selection-header"
*ngIf="!selection.isEmpty()">
{{selection.selected.length}}
{{selection.selected.length == 1 ? 'user' : 'users'}}
selected
</div>
<div class="example-container mat-elevation-z8">
<mat-table #table [dataSource]="dataSource" matSort>
<!--- Note that these columns can be defined in any order.
The actual rendered columns are set as a property on the row definition" -->
<!-- Checkbox Column -->
<ng-container matColumnDef="select">
<mat-header-cell *matHeaderCellDef>
<mat-checkbox (change)="$event ? masterToggle() : null"
[checked]="isAllSelected()"
[indeterminate]="selection.hasValue() && !isAllSelected()">
</mat-checkbox>
</mat-header-cell>
<mat-cell *matCellDef="let row">
<mat-checkbox (click)="$event.stopPropagation()"
(change)="$event ? selection.toggle(row.id) : null"
[checked]="selection.isSelected(row.id)">
</mat-checkbox>
</mat-cell>
</ng-container>
<mat-table [dataSource]="dataSource" matSort>
<!-- ID Column -->
<ng-container matColumnDef="userId">
<ng-container matColumnDef="id">
<mat-header-cell *matHeaderCellDef mat-sort-header> ID</mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.id}}</mat-cell>
</ng-container>
@@ -46,7 +21,7 @@
</ng-container>
<!-- Name Column -->
<ng-container matColumnDef="userName">
<ng-container matColumnDef="name">
<mat-header-cell *matHeaderCellDef mat-sort-header> Name</mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.name}}</mat-cell>
</ng-container>
@@ -58,21 +33,9 @@
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;"
[class.example-selected-row]="selection.isSelected(row.id)"
(click)="selection.toggle(row.id)">
<mat-row *matRowDef="let row; columns: displayedColumns;">
</mat-row>
</mat-table>
<div class="example-no-results"
[style.display]="dataSource.renderedData.length == 0 ? '' : 'none'">
No users found matching filter.
</div>
<mat-paginator #paginator
[length]="dataSource.filteredData.length"
[pageIndex]="0"
[pageSize]="25"
[pageSizeOptions]="[5, 10, 25, 100]">
</mat-paginator>
<mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
</div>

257
src/assets/angular-material-examples/table-overview/table-overview-example.ts
View File

@@ -1,18 +1,8 @@
import { Component, ElementRef, ViewChild } from '@angular/core';
import { DataSource } from '@angular/cdk/collections';
import { MatPaginator, MatSort } from '@angular/material';
import { SelectionModel } from '@angular/cdk/collections';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/startWith';
import 'rxjs/add/observable/merge';
import 'rxjs/add/observable/fromEvent';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/distinctUntilChanged';
import 'rxjs/add/operator/debounceTime';
import { Component, ViewChild } from '@angular/core';
import { MatPaginator, MatSort, MatTableDataSource } from '@angular/material';
/**
* @title Feature-rich data table
* @title Data table with sorting, pagination, and filtering.
*/
@Component({
selector : 'table-overview-example',
@@ -21,73 +11,58 @@ import 'rxjs/add/operator/debounceTime';
})
export class TableOverviewExample
{
displayedColumns = ['select', 'userId', 'userName', 'progress', 'color'];
exampleDatabase = new ExampleDatabase();
selection = new SelectionModel<string>(true, []);
dataSource: ExampleDataSource | null;
displayedColumns = ['id', 'name', 'progress', 'color'];
dataSource: MatTableDataSource<UserData>;
@ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild(MatSort) sort: MatSort;
@ViewChild('filter') filter: ElementRef;
ngOnInit()
constructor()
{
this.dataSource = new ExampleDataSource(this.exampleDatabase, this.paginator, this.sort);
Observable.fromEvent(this.filter.nativeElement, 'keyup')
.debounceTime(150)
.distinctUntilChanged()
.subscribe(() => {
if ( !this.dataSource )
{
return;
}
this.dataSource.filter = this.filter.nativeElement.value;
});
// Create 100 users
const users: UserData[] = [];
for ( let i = 1; i <= 100; i++ )
{
users.push(createNewUser(i));
}
// Assign the data to the data source for the table to render
this.dataSource = new MatTableDataSource(users);
}
isAllSelected(): boolean
/**
* Set the paginator and sort after the view init since this component will
* be able to query its view for the initialized paginator and sort.
*/
ngAfterViewInit()
{
if ( !this.dataSource )
{
return false;
}
if ( this.selection.isEmpty() )
{
return false;
}
if ( this.filter.nativeElement.value )
{
return this.selection.selected.length == this.dataSource.renderedData.length;
}
else
{
return this.selection.selected.length == this.exampleDatabase.data.length;
}
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
}
masterToggle()
applyFilter(filterValue: string)
{
if ( !this.dataSource )
{
return;
}
if ( this.isAllSelected() )
{
this.selection.clear();
}
else if ( this.filter.nativeElement.value )
{
this.dataSource.renderedData.forEach(data => this.selection.select(data.id));
}
else
{
this.exampleDatabase.data.forEach(data => this.selection.select(data.id));
}
filterValue = filterValue.trim(); // Remove whitespace
filterValue = filterValue.toLowerCase(); // Datasource defaults to lowercase matches
this.dataSource.filter = filterValue;
}
}
/** Builds and returns a new User. */
function createNewUser(id: number): UserData
{
const name =
NAMES[Math.round(Math.random() * (NAMES.length - 1))] + ' ' +
NAMES[Math.round(Math.random() * (NAMES.length - 1))].charAt(0) + '.';
return {
id : id.toString(),
name : name,
progress: Math.round(Math.random() * 100).toString(),
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',
@@ -106,153 +81,3 @@ export interface UserData
progress: string;
color: string;
}
/** An example database that the data source uses to retrieve data for the table. */
export class ExampleDatabase
{
/** Stream that emits whenever the data has been modified. */
dataChange: BehaviorSubject<UserData[]> = new BehaviorSubject<UserData[]>([]);
get data(): UserData[]
{
return this.dataChange.value;
}
constructor()
{
// Fill up the database with 100 users.
setTimeout(() => {
for ( let i = 0; i < 100; i++ )
{
this.addUser();
}
});
}
/** Adds a new user to the database. */
addUser()
{
const copiedData = this.data.slice();
copiedData.push(this.createNewUser());
this.dataChange.next(copiedData);
}
/** Builds and returns a new User. */
private createNewUser()
{
const name =
NAMES[Math.round(Math.random() * (NAMES.length - 1))] + ' ' +
NAMES[Math.round(Math.random() * (NAMES.length - 1))].charAt(0) + '.';
return {
id : (this.data.length + 1).toString(),
name : name,
progress: Math.round(Math.random() * 100).toString(),
color : COLORS[Math.round(Math.random() * (COLORS.length - 1))]
};
}
}
/**
* 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
* to a common data base, ExampleDatabase. It is not the data source's responsibility to manage
* the underlying data. Instead, it only needs to take the data and send the table exactly what
* should be rendered.
*/
export class ExampleDataSource extends DataSource<any>
{
_filterChange = new BehaviorSubject('');
get filter(): string
{
return this._filterChange.value;
}
set filter(filter: string)
{
this._filterChange.next(filter);
}
filteredData: UserData[] = [];
renderedData: UserData[] = [];
constructor(
private _exampleDatabase: ExampleDatabase,
private _paginator: MatPaginator,
private _sort: MatSort
)
{
super();
// Reset to the first page when the user changes the filter.
this._filterChange.subscribe(() => this._paginator.pageIndex = 0);
}
/** Connect function called by the table to retrieve one stream containing the data to render. */
connect(): Observable<UserData[]>
{
// Listen for any changes in the base data, sorting, filtering, or pagination
const displayDataChanges = [
this._exampleDatabase.dataChange,
this._sort.sortChange,
this._filterChange,
this._paginator.page
];
return Observable.merge(...displayDataChanges).map(() => {
// Filter data
this.filteredData = this._exampleDatabase.data.slice().filter((item: UserData) => {
let searchStr = (item.name + item.color).toLowerCase();
return searchStr.indexOf(this.filter.toLowerCase()) != -1;
});
// Sort filtered data
const sortedData = this.sortData(this.filteredData.slice());
// Grab the page's slice of the filtered sorted data.
const startIndex = this._paginator.pageIndex * this._paginator.pageSize;
this.renderedData = sortedData.splice(startIndex, this._paginator.pageSize);
return this.renderedData;
});
}
disconnect()
{
}
/** Returns a sorted copy of the database data. */
sortData(data: UserData[]): UserData[]
{
if ( !this._sort.active || this._sort.direction == '' )
{
return data;
}
return data.sort((a, b) => {
let propertyA: number | string = '';
let propertyB: number | string = '';
switch ( this._sort.active )
{
case 'userId':
[propertyA, propertyB] = [a.id, b.id];
break;
case 'userName':
[propertyA, propertyB] = [a.name, b.name];
break;
case 'progress':
[propertyA, propertyB] = [a.progress, b.progress];
break;
case 'color':
[propertyA, propertyB] = [a.color, b.color];
break;
}
let valueA = isNaN(+propertyA) ? propertyA : +propertyA;
let valueB = isNaN(+propertyB) ? propertyB : +propertyB;
return (valueA < valueB ? -1 : 1) * (this._sort.direction == 'asc' ? 1 : -1);
});
}
}

Some files were not shown because too many files have changed in this diff Show More