Update Angular, Angular Material and Flex Layout to 6

Updated additional project files
Updated Angular Material examples

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

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

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

@@ -1,36 +1,37 @@
 <div class="example-container mat-elevation-z8">
-    <mat-table #table [dataSource]="dataSource">
+  <table mat-table #table [dataSource]="dataSource">
 
-        <!-- Position Column -->
-        <ng-container matColumnDef="position">
-            <mat-header-cell *matHeaderCellDef> No.</mat-header-cell>
-            <mat-cell *matCellDef="let element"> {{element.position}}</mat-cell>
-        </ng-container>
+    <!-- Position Column -->
+    <ng-container matColumnDef="position">
+      <th mat-header-cell *matHeaderCellDef> No. </th>
+      <td mat-cell *matCellDef="let element"> {{element.position}} </td>
+    </ng-container>
 
-        <!-- Name Column -->
-        <ng-container matColumnDef="name">
-            <mat-header-cell *matHeaderCellDef> Name</mat-header-cell>
-            <mat-cell *matCellDef="let element"> {{element.name}}</mat-cell>
-        </ng-container>
+    <!-- Name Column -->
+    <ng-container matColumnDef="name">
+      <th mat-header-cell *matHeaderCellDef> Name </th>
+      <td mat-cell *matCellDef="let element"> {{element.name}} </td>
+    </ng-container>
 
-        <!-- Weight Column -->
-        <ng-container matColumnDef="weight">
-            <mat-header-cell *matHeaderCellDef> Weight</mat-header-cell>
-            <mat-cell *matCellDef="let element"> {{element.weight}}</mat-cell>
-        </ng-container>
+    <!-- Weight Column -->
+    <ng-container matColumnDef="weight">
+      <th mat-header-cell *matHeaderCellDef> Weight </th>
+      <td mat-cell *matCellDef="let element"> {{element.weight}} </td>
+    </ng-container>
 
-        <!-- Color Column -->
-        <ng-container matColumnDef="symbol">
-            <mat-header-cell *matHeaderCellDef> Symbol</mat-header-cell>
-            <mat-cell *matCellDef="let element"> {{element.symbol}}</mat-cell>
-        </ng-container>
+    <!-- Symbol Column -->
+    <ng-container matColumnDef="symbol">
+      <th mat-header-cell *matHeaderCellDef> Symbol </th>
+      <td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
+    </ng-container>
 
-        <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
-        <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
-    </mat-table>
+    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+  </table>
 
-    <mat-paginator #paginator
-                   [pageSize]="10"
-                   [pageSizeOptions]="[5, 10, 20]">
-    </mat-paginator>
-</div>
+  <mat-paginator #paginator
+                 [pageSize]="10"
+                 [pageSizeOptions]="[5, 10, 20]"
+                 [showFirstLastButtons]="true">
+  </mat-paginator>
+</div>

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

@@ -1,158 +1,51 @@
-import { Component, ViewChild } from '@angular/core';
-import { MatPaginator, MatTableDataSource } from '@angular/material';
+import {Component, ViewChild} from '@angular/core';
+import {MatPaginator, MatTableDataSource} from '@angular/material';
 
 /**
  * @title Table with pagination
  */
 @Component({
-    selector   : 'table-pagination-example',
-    styleUrls  : ['table-pagination-example.css'],
-    templateUrl: 'table-pagination-example.html'
+  selector: 'table-pagination-example',
+  styleUrls: ['table-pagination-example.css'],
+  templateUrl: 'table-pagination-example.html',
 })
-export class TablePaginationExample
-{
-    displayedColumns = ['position', 'name', 'weight', 'symbol'];
-    dataSource = new MatTableDataSource<Element>(ELEMENT_DATA);
+export class TablePaginationExample {
+  displayedColumns = ['position', 'name', 'weight', 'symbol'];
+  dataSource = new MatTableDataSource<Element>(ELEMENT_DATA);
 
-    @ViewChild(MatPaginator) paginator: MatPaginator;
+  @ViewChild(MatPaginator) paginator: MatPaginator;
 
-    /**
-     * Set the paginator after the view init since this component will
-     * be able to query its view for the initialized paginator.
-     */
-    ngAfterViewInit()
-    {
-        this.dataSource.paginator = this.paginator;
-    }
+  ngOnInit() {
+    this.dataSource.paginator = this.paginator;
+  }
 }
 
-export interface Element
-{
-    name: string;
-    position: number;
-    weight: number;
-    symbol: string;
+export interface Element {
+  name: string;
+  position: number;
+  weight: number;
+  symbol: string;
 }
 
 const ELEMENT_DATA: Element[] = [
-    {
-        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'
-    },
-    {
-        position: 4,
-        name    : 'Beryllium',
-        weight  : 9.0122,
-        symbol  : 'Be'
-    },
-    {
-        position: 5,
-        name    : 'Boron',
-        weight  : 10.811,
-        symbol  : 'B'
-    },
-    {
-        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'
-    }
+  {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'},
+  {position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be'},
+  {position: 5, name: 'Boron', weight: 10.811, symbol: 'B'},
+  {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'},
 ];