-
-
+ *ngIf="isLoadingResults || isRateLimitReached">
+
+
GitHub's API rate limit has been reached. It will be reset in one minute.
-
+
diff --git a/src/assets/angular-material-examples/table-http/table-http-example.ts b/src/assets/angular-material-examples/table-http/table-http-example.ts
index a6848596..4f852bd2 100644
--- a/src/assets/angular-material-examples/table-http/table-http-example.ts
+++ b/src/assets/angular-material-examples/table-http/table-http-example.ts
@@ -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
-{
- // 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
- {
- 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(requestUrl);
}
}
diff --git a/src/assets/angular-material-examples/table-overview/table-overview-example.css b/src/assets/angular-material-examples/table-overview/table-overview-example.css
index 5ddeba4b..986a3a60 100644
--- a/src/assets/angular-material-examples/table-overview/table-overview-example.css
+++ b/src/assets/angular-material-examples/table-overview/table-overview-example.css
@@ -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 {
diff --git a/src/assets/angular-material-examples/table-overview/table-overview-example.html b/src/assets/angular-material-examples/table-overview/table-overview-example.html
index 161ae82b..61bafd76 100644
--- a/src/assets/angular-material-examples/table-overview/table-overview-example.html
+++ b/src/assets/angular-material-examples/table-overview/table-overview-example.html
@@ -1,40 +1,15 @@
-
\ No newline at end of file
diff --git a/src/assets/angular-material-examples/table-pagination/table-pagination-example.ts b/src/assets/angular-material-examples/table-pagination/table-pagination-example.ts
index ea56ac61..ad297cbe 100644
--- a/src/assets/angular-material-examples/table-pagination/table-pagination-example.ts
+++ b/src/assets/angular-material-examples/table-pagination/table-pagination-example.ts
@@ -1,11 +1,5 @@
import { Component, ViewChild } from '@angular/core';
-import { DataSource } from '@angular/cdk/collections';
-import { MatPaginator } from '@angular/material';
-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 { MatPaginator, MatTableDataSource } from '@angular/material';
/**
* @title Table with pagination
@@ -17,113 +11,148 @@ import 'rxjs/add/operator/map';
})
export class TablePaginationExample
{
- displayedColumns = ['userId', 'userName', 'progress', 'color'];
- exampleDatabase = new ExampleDatabase();
- dataSource: ExampleDataSource | null;
+ displayedColumns = ['position', 'name', 'weight', 'symbol'];
+ dataSource = new MatTableDataSource(ELEMENT_DATA);
@ViewChild(MatPaginator) paginator: MatPaginator;
- ngOnInit()
+ /**
+ * Set the paginator after the view init since this component will
+ * be able to query its view for the initialized paginator.
+ */
+ ngAfterViewInit()
{
- this.dataSource = new ExampleDataSource(this.exampleDatabase, this.paginator);
+ this.dataSource.paginator = this.paginator;
}
}
-/** 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 = new BehaviorSubject([]);
-
- 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
-{
- constructor(private _exampleDatabase: ExampleDatabase, private _paginator: MatPaginator)
+ position: 4,
+ name : 'Beryllium',
+ weight : 9.0122,
+ symbol : 'Be'
+ },
{
- super();
- }
-
- /** Connect function called by the table to retrieve one stream containing the data to render. */
- connect(): Observable
+ position: 5,
+ name : 'Boron',
+ weight : 10.811,
+ symbol : 'B'
+ },
{
- const displayDataChanges = [
- this._exampleDatabase.dataChange,
- this._paginator.page
- ];
-
- return Observable.merge(...displayDataChanges).map(() => {
- const data = this._exampleDatabase.data.slice();
-
- // Grab the page's slice of data.
- const startIndex = this._paginator.pageIndex * this._paginator.pageSize;
- return data.splice(startIndex, this._paginator.pageSize);
- });
- }
-
- disconnect()
+ 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'
+ },
+ {
+ 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'
}
-}
+];
diff --git a/src/assets/angular-material-examples/table-sorting/table-sorting-example.css b/src/assets/angular-material-examples/table-sorting/table-sorting-example.css
index 7bde15b2..a5b2b1bd 100644
--- a/src/assets/angular-material-examples/table-sorting/table-sorting-example.css
+++ b/src/assets/angular-material-examples/table-sorting/table-sorting-example.css
@@ -1,23 +1,14 @@
-/* Structure */
.example-container {
display: flex;
flex-direction: column;
min-width: 300px;
}
-.example-header {
- min-height: 64px;
- display: flex;
- align-items: center;
- padding-left: 24px;
- font-size: 20px;
-}
-
.mat-table {
overflow: auto;
max-height: 500px;
}
-.mat-header-cell .mat-sort-header-sorted {
+.mat-header-cell.mat-sort-header-sorted {
color: black;
}
diff --git a/src/assets/angular-material-examples/table-sorting/table-sorting-example.html b/src/assets/angular-material-examples/table-sorting/table-sorting-example.html
index ff15e446..b7d868d2 100644
--- a/src/assets/angular-material-examples/table-sorting/table-sorting-example.html
+++ b/src/assets/angular-material-examples/table-sorting/table-sorting-example.html
@@ -1,34 +1,31 @@
-
-
-
-
- ID
- {{row.id}}
-
-
-
-
- Progress
- {{row.progress}}%
+
+
+ No.
+ {{element.position}}
-
+
Name
- {{row.name}}
+ {{element.name}}
+
+
+
+
+ Weight
+ {{element.weight}}
-
- Color
- {{row.color}}
+
+ Symbol
+ {{element.symbol}}
-
+
\ No newline at end of file
diff --git a/src/assets/angular-material-examples/table-sorting/table-sorting-example.ts b/src/assets/angular-material-examples/table-sorting/table-sorting-example.ts
index f9240cd0..2d3e82a7 100644
--- a/src/assets/angular-material-examples/table-sorting/table-sorting-example.ts
+++ b/src/assets/angular-material-examples/table-sorting/table-sorting-example.ts
@@ -1,11 +1,5 @@
import { Component, ViewChild } from '@angular/core';
-import { DataSource } from '@angular/cdk/collections';
-import { MatSort } from '@angular/material';
-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 { MatTableDataSource, MatSort } from '@angular/material';
/**
* @title Table with sorting
@@ -17,145 +11,148 @@ import 'rxjs/add/operator/map';
})
export class TableSortingExample
{
- displayedColumns = ['userId', 'userName', 'progress', 'color'];
- exampleDatabase = new ExampleDatabase();
- dataSource: ExampleDataSource | null;
+ displayedColumns = ['position', 'name', 'weight', 'symbol'];
+ dataSource = new MatTableDataSource(ELEMENT_DATA);
@ViewChild(MatSort) sort: MatSort;
- ngOnInit()
+ /**
+ * Set the sort after the view init since this component will
+ * be able to query its view for the initialized sort.
+ */
+ ngAfterViewInit()
{
- this.dataSource = new ExampleDataSource(this.exampleDatabase, this.sort);
+ this.dataSource.sort = this.sort;
}
}
-/** 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