handle paginator output

Author: lharries

src/demo-app/table/table-demo.html

@@ -176,54 +176,17 @@ <h3>MatTable with First/Last Buttons Example</h3>
 
 <div class="demo-table-container demo-mat-table-example mat-elevation-z4">
 
-  <table-header-demo (shiftColumns)="displayedColumns.push(displayedColumns.shift())"
-                     (toggleColorColumn)="toggleColorColumn()">
+  <table-header-demo>
   </table-header-demo>
 
-  <mat-table [dataSource]="dataSource" [trackBy]="userTrackBy">
-
-    <!-- Column Definition: ID -->
-    <ng-container cdkColumnDef="userId">
-      <mat-header-cell *matHeaderCellDef> ID </mat-header-cell>
-      <mat-cell *matCellDef="let row"> {{row.id}} </mat-cell>
-    </ng-container>
-
-    <!-- Column Definition: Progress -->
-    <ng-container matColumnDef="progress">
-      <mat-header-cell *matHeaderCellDef> Progress </mat-header-cell>
-      <mat-cell *matCellDef="let row">
-        <div class="demo-progress-stat">{{row.progress}}%</div>
-        <div class="demo-progress-indicator-container">
-          <div class="demo-progress-indicator"
-               [style.background]="row.progress > 50 ? 'green' : 'red'"
-               [style.opacity]="getOpacity(row.progress)"
-               [style.width.%]="row.progress"></div>
-        </div>
-      </mat-cell>
-    </ng-container>
-
-    <!-- Column Definition: Name -->
-    <ng-container matColumnDef="userName">
-      <mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
-      <mat-cell *matCellDef="let row"> {{row.name}} </mat-cell>
-    </ng-container>
-
-    <!-- Column Definition: Color -->
-    <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>
-
-    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
-    <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
-
-  </mat-table>
+  <h4 class="paginator-output">{{paginatorOutput | json}}</h4>
 
   <mat-paginator #paginator
                 [length]="_peopleDatabase.data.length"
                 [pageSize]="10"
                 [pageSizeOptions]="[5, 10, 25, 100]"
-                [showFirstLastButtons]="true">
+                [showFirstLastButtons]="true"
+                (page)="handlePaginator($event)">
   </mat-paginator>
 </div>
 

src/demo-app/table/table-demo.scss

@@ -141,3 +141,7 @@
     background: #f5f5f5;
   }
 }
+
+.paginator-output {
+  margin-left: 20px;
+}

src/demo-app/table/table-demo.ts

@@ -9,7 +9,7 @@
 import {Component, ElementRef, ViewChild} from '@angular/core';
 import {PeopleDatabase, UserData} from './people-database';
 import {PersonDataSource} from './person-data-source';
-import {MatPaginator, MatSort, MatTableDataSource} from '@angular/material';
+import {MatPaginator, MatSort, MatTableDataSource, PageEvent} from '@angular/material';
 import {DetailRow, PersonDetailDataSource} from './person-detail-data-source';
 import {animate, state, style, transition, trigger} from '@angular/animations';
 import {SelectionModel} from '@angular/cdk/collections';
@@ -65,6 +65,8 @@ export class TableDemo {
   @ViewChild('paginatorForDataSource') paginatorForDataSource: MatPaginator;
   @ViewChild('sortForDataSource') sortForDataSource: MatSort;
 
+  paginatorOutput: PageEvent;
+
   constructor(public _peopleDatabase: PeopleDatabase) {
     this.matTableDataSource.sortingDataAccessor = (data: UserData, property: string) => {
       switch (property) {
@@ -183,4 +185,8 @@ export class TableDemo {
   toggleHighlight(property: string, enable: boolean) {
     enable ? this.highlights.add(property) : this.highlights.delete(property);
   }
+
+  handlePaginator(pageEvent: PageEvent) {
+    this.paginatorOutput = pageEvent;
+  }
 }