Updated Angular Material examples

src/assets/angular-material-examples/table-pagination/table-pagination-example.css

@@ -1,8 +1,3 @@
-.example-container {
-  display: flex;
-  flex-direction: column;
-  min-width: 300px;
-  max-height: 500px;
-  overflow: auto;
+table {
+  width: 100%;
 }
-

src/assets/angular-material-examples/table-pagination/table-pagination-example.html

@@ -1,5 +1,5 @@
-<div class="example-container mat-elevation-z8">
-  <table mat-table #table [dataSource]="dataSource">
+<div class="mat-elevation-z8">
+  <table mat-table [dataSource]="dataSource">
 
     <!-- Position Column -->
     <ng-container matColumnDef="position">
@@ -29,9 +29,5 @@
     <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
   </table>
 
-  <mat-paginator #paginator
-                 [pageSize]="10"
-                 [pageSizeOptions]="[5, 10, 20]"
-                 [showFirstLastButtons]="true">
-  </mat-paginator>
+  <mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>
 </div>

src/assets/angular-material-examples/table-pagination/table-pagination-example.ts

@@ -1,4 +1,4 @@
-import {Component, ViewChild} from '@angular/core';
+import {Component, OnInit, ViewChild} from '@angular/core';
 import {MatPaginator, MatTableDataSource} from '@angular/material';
 
 /**
@@ -9,9 +9,9 @@ import {MatPaginator, MatTableDataSource} from '@angular/material';
   styleUrls: ['table-pagination-example.css'],
   templateUrl: 'table-pagination-example.html',
 })
-export class TablePaginationExample {
+export class TablePaginationExample implements OnInit {
   displayedColumns = ['position', 'name', 'weight', 'symbol'];
-  dataSource = new MatTableDataSource<Element>(ELEMENT_DATA);
+  dataSource = new MatTableDataSource<PeriodicElement>(ELEMENT_DATA);
 
   @ViewChild(MatPaginator) paginator: MatPaginator;
 
@@ -20,14 +20,14 @@ export class TablePaginationExample {
   }
 }
 
-export interface Element {
+export interface PeriodicElement {
   name: string;
   position: number;
   weight: number;
   symbol: string;
 }
 
-const ELEMENT_DATA: Element[] = [
+const ELEMENT_DATA: PeriodicElement[] = [
   {position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
   {position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
   {position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},