Revert "Revert "docs(material/table): use declarative idiomatic RxJS in table-http-example (angular#22053)" (angular#22725)"

- this reverts commit 9295ce5
- add `detectChanges()` call to fix `NG0100: ExpressionChangedAfterItHasBeenCheckedError`

Author: Splaktar

scripts/shim-scss-imports.js

@@ -6,7 +6,7 @@
 .example-table-container {
   position: relative;
   min-height: 200px;
-  max-height: 400px;
+  height: 400px;
   overflow: auto;
 }
 

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

@@ -9,8 +9,9 @@
 
   <div class="example-table-container">
 
-    <table mat-table [dataSource]="data" class="example-table"
-           matSort matSortActive="created" matSortDisableClear matSortDirection="desc">
+    <table mat-table [dataSource]="filteredAndPagedIssues" class="example-table" matSort
+           matSortActive="created" matSortDisableClear matSortDirection="desc"
+           (matSortChange)="resetPaging()">
       <!-- Number Column -->
       <ng-container matColumnDef="number">
         <th mat-header-cell *matHeaderCellDef>#</th>

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

@@ -1,5 +1,5 @@
 import {HttpClient} from '@angular/common/http';
-import {Component, ViewChild, AfterViewInit} from '@angular/core';
+import {Component, ViewChild, AfterViewInit, ChangeDetectorRef} from '@angular/core';
 import {MatPaginator} from '@angular/material/paginator';
 import {MatSort, SortDirection} from '@angular/material/sort';
 import {merge, Observable, of as observableOf} from 'rxjs';
@@ -16,7 +16,7 @@ import {catchError, map, startWith, switchMap} from 'rxjs/operators';
 export class TableHttpExample implements AfterViewInit {
   displayedColumns: string[] = ['created', 'state', 'number', 'title'];
   exampleDatabase: ExampleHttpDatabase | null;
-  data: GithubIssue[] = [];
+  filteredAndPagedIssues: Observable<GithubIssue[]>;
 
   resultsLength = 0;
   isLoadingResults = true;
@@ -25,15 +25,12 @@ export class TableHttpExample implements AfterViewInit {
   @ViewChild(MatPaginator) paginator: MatPaginator;
   @ViewChild(MatSort) sort: MatSort;
 
-  constructor(private _httpClient: HttpClient) {}
+  constructor(private _httpClient: HttpClient, private _changeDetectorRef: ChangeDetectorRef) {}
 
   ngAfterViewInit() {
     this.exampleDatabase = new ExampleHttpDatabase(this._httpClient);
 
-    // If the user changes the sort order, reset back to the first page.
-    this.sort.sortChange.subscribe(() => this.paginator.pageIndex = 0);
-
-    merge(this.sort.sortChange, this.paginator.page)
+    this.filteredAndPagedIssues = merge(this.sort.sortChange, this.paginator.page)
       .pipe(
         startWith({}),
         switchMap(() => {
@@ -57,7 +54,12 @@ export class TableHttpExample implements AfterViewInit {
           this.resultsLength = data.total_count;
           return data.items;
         })
-      ).subscribe(data => this.data = data);
+      );
+    this._changeDetectorRef.detectChanges();
+  }
+
+  resetPaging(): void {
+    this.paginator.pageIndex = 0;
   }
 }