Skip to content

Commit 3c81b0e

Browse files
crisbetoandrewseguin
authored andcommitted
docs(table): incorrect initial request in http example (#14692)
Fixes the first request in the table HTTP example being incorrect due to some of the data not being initialized. Also cleans up the example a bit. Fixes #14683.
1 parent 4b96b4f commit 3c81b0e

File tree

3 files changed

+8
-7
lines changed

3 files changed

+8
-7
lines changed

src/material-examples/table-http/table-http-example.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
/* Structure */
22
.example-container {
33
position: relative;
4+
min-height: 200px;
45
}
56

67
.example-table-container {

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
<div class="example-table-container">
1111

1212
<table mat-table [dataSource]="data" class="example-table"
13-
matSort matSortActive="created" matSortDisableClear matSortDirection="asc">
13+
matSort matSortActive="created" matSortDisableClear matSortDirection="desc">
1414
<!-- Number Column -->
1515
<ng-container matColumnDef="number">
1616
<th mat-header-cell *matHeaderCellDef>#</th>

src/material-examples/table-http/table-http-example.ts

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import {HttpClient} from '@angular/common/http';
2-
import {Component, OnInit, ViewChild} from '@angular/core';
2+
import {Component, ViewChild, AfterViewInit} from '@angular/core';
33
import {MatPaginator, MatSort} from '@angular/material';
44
import {merge, Observable, of as observableOf} from 'rxjs';
55
import {catchError, map, startWith, switchMap} from 'rxjs/operators';
@@ -12,9 +12,9 @@ import {catchError, map, startWith, switchMap} from 'rxjs/operators';
1212
styleUrls: ['table-http-example.css'],
1313
templateUrl: 'table-http-example.html',
1414
})
15-
export class TableHttpExample implements OnInit {
15+
export class TableHttpExample implements AfterViewInit {
1616
displayedColumns: string[] = ['created', 'state', 'number', 'title'];
17-
exampleDatabase: ExampleHttpDao | null;
17+
exampleDatabase: ExampleHttpDatabase | null;
1818
data: GithubIssue[] = [];
1919

2020
resultsLength = 0;
@@ -26,8 +26,8 @@ export class TableHttpExample implements OnInit {
2626

2727
constructor(private http: HttpClient) {}
2828

29-
ngOnInit() {
30-
this.exampleDatabase = new ExampleHttpDao(this.http);
29+
ngAfterViewInit() {
30+
this.exampleDatabase = new ExampleHttpDatabase(this.http);
3131

3232
// If the user changes the sort order, reset back to the first page.
3333
this.sort.sortChange.subscribe(() => this.paginator.pageIndex = 0);
@@ -71,7 +71,7 @@ export interface GithubIssue {
7171
}
7272

7373
/** An example database that the data source uses to retrieve data for the table. */
74-
export class ExampleHttpDao {
74+
export class ExampleHttpDatabase {
7575
constructor(private http: HttpClient) {}
7676

7777
getRepoIssues(sort: string, order: string, page: number): Observable<GithubApi> {

0 commit comments

Comments
 (0)