@angular/material v2.0.0-beta.12 compability update,

Lots of breaking changes,
all "md" prefixes changed with "mat" due to angular material deprecation of "md",
md2 package removed, its not compatible with latest material version, will be replaced with another date picker later.

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

@@ -1,19 +1,19 @@
 /* Structure */
 .example-container {
-  display: flex;
-  flex-direction: column;
-  min-width: 300px;
+    display: flex;
+    flex-direction: column;
+    min-width: 300px;
 }
 
 .example-header {
-  min-height: 64px;
-  display: flex;
-  align-items: center;
-  padding-left: 24px;
-  font-size: 20px;
+    min-height: 64px;
+    display: flex;
+    align-items: center;
+    padding-left: 24px;
+    font-size: 20px;
 }
 
 .mat-table {
-  overflow: auto;
-  max-height: 500px;
+    overflow: auto;
+    max-height: 500px;
 }

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

@@ -1,42 +1,42 @@
 <div class="example-container mat-elevation-z8">
 
-  <md-table #table [dataSource]="dataSource">
+    <mat-table #table [dataSource]="dataSource">
 
-    <!--- Note that these columns can be defined in any order.
-          The actual rendered columns are set as a property on the row definition" -->
+        <!--- Note that these columns can be defined in any order.
+              The actual rendered columns are set as a property on the row definition" -->
 
-    <!-- ID Column -->
-    <ng-container mdColumnDef="userId">
-      <md-header-cell *mdHeaderCellDef> ID </md-header-cell>
-      <md-cell *mdCellDef="let row"> {{row.id}} </md-cell>
-    </ng-container>
+        <!-- ID Column -->
+        <ng-container matColumnDef="userId">
+            <mat-header-cell *matHeaderCellDef> ID</mat-header-cell>
+            <mat-cell *matCellDef="let row"> {{row.id}}</mat-cell>
+        </ng-container>
 
-    <!-- Progress Column -->
-    <ng-container mdColumnDef="progress">
-      <md-header-cell *mdHeaderCellDef> Progress </md-header-cell>
-      <md-cell *mdCellDef="let row"> {{row.progress}}% </md-cell>
-    </ng-container>
+        <!-- Progress Column -->
+        <ng-container matColumnDef="progress">
+            <mat-header-cell *matHeaderCellDef> Progress</mat-header-cell>
+            <mat-cell *matCellDef="let row"> {{row.progress}}%</mat-cell>
+        </ng-container>
 
-    <!-- Name Column -->
-    <ng-container mdColumnDef="userName">
-      <md-header-cell *mdHeaderCellDef> Name </md-header-cell>
-      <md-cell *mdCellDef="let row"> {{row.name}} </md-cell>
-    </ng-container>
+        <!-- Name Column -->
+        <ng-container matColumnDef="userName">
+            <mat-header-cell *matHeaderCellDef> Name</mat-header-cell>
+            <mat-cell *matCellDef="let row"> {{row.name}}</mat-cell>
+        </ng-container>
 
-    <!-- Color Column -->
-    <ng-container mdColumnDef="color">
-      <md-header-cell *mdHeaderCellDef> Color </md-header-cell>
-      <md-cell *mdCellDef="let row" [style.color]="row.color"> {{row.color}} </md-cell>
-    </ng-container>
+        <!-- Color Column -->
+        <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>
 
-    <md-header-row *mdHeaderRowDef="displayedColumns"></md-header-row>
-    <md-row *mdRowDef="let row; columns: displayedColumns;"></md-row>
-  </md-table>
+        <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+        <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
+    </mat-table>
 
-  <md-paginator #paginator
-                [length]="exampleDatabase.data.length"
-                [pageIndex]="0"
-                [pageSize]="25"
-                [pageSizeOptions]="[5, 10, 25, 100]">
-  </md-paginator>
+    <mat-paginator #paginator
+                   [length]="exampleDatabase.data.length"
+                   [pageIndex]="0"
+                   [pageSize]="25"
+                   [pageSizeOptions]="[5, 10, 25, 100]">
+    </mat-paginator>
 </div>

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

@@ -1,8 +1,8 @@
-import {Component, ViewChild} from '@angular/core';
-import {DataSource} from '@angular/cdk/collections';
-import {MdPaginator} from '@angular/material';
-import {BehaviorSubject} from 'rxjs/BehaviorSubject';
-import {Observable} from 'rxjs/Observable';
+import { Component, ViewChild } from '@angular/core';
+import { DataSource } from '@angular/cdk/collections';
+import { MatPaginator } from '@angular/material';
+import { BehaviorSubject } from 'rxjs/BehaviorSubject';
+import { Observable } from 'rxjs/Observable';
 import 'rxjs/add/operator/startWith';
 import 'rxjs/add/observable/merge';
 import 'rxjs/add/operator/map';
@@ -11,67 +11,85 @@ import 'rxjs/add/operator/map';
  * @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 = ['userId', 'userName', 'progress', 'color'];
-  exampleDatabase = new ExampleDatabase();
-  dataSource: ExampleDataSource | null;
+export class TablePaginationExample
+{
+    displayedColumns = ['userId', 'userName', 'progress', 'color'];
+    exampleDatabase = new ExampleDatabase();
+    dataSource: ExampleDataSource | null;
 
-  @ViewChild(MdPaginator) paginator: MdPaginator;
+    @ViewChild(MatPaginator) paginator: MatPaginator;
 
-  ngOnInit() {
-    this.dataSource = new ExampleDataSource(this.exampleDatabase, this.paginator);
-  }
+    ngOnInit()
+    {
+        this.dataSource = new ExampleDataSource(this.exampleDatabase, this.paginator);
+    }
 }
 
 /** Constants used to fill up our data base. */
-const COLORS = ['maroon', 'red', 'orange', 'yellow', 'olive', 'green', 'purple',
-  'fuchsia', 'lime', 'teal', 'aqua', 'blue', 'navy', 'black', 'gray'];
-const NAMES = ['Maia', 'Asher', 'Olivia', 'Atticus', 'Amelia', 'Jack',
-  'Charlotte', 'Theodore', 'Isla', 'Oliver', 'Isabella', 'Jasper',
-  'Cora', 'Levi', 'Violet', 'Arthur', 'Mia', 'Thomas', 'Elizabeth'];
+const COLORS = [
+    'maroon', 'red', 'orange', 'yellow', 'olive', 'green', 'purple',
+    'fuchsia', 'lime', 'teal', 'aqua', 'blue', 'navy', 'black', 'gray'
+];
+const NAMES = [
+    'Maia', 'Asher', 'Olivia', 'Atticus', 'Amelia', 'Jack',
+    'Charlotte', 'Theodore', 'Isla', 'Oliver', 'Isabella', 'Jasper',
+    'Cora', 'Levi', 'Violet', 'Arthur', 'Mia', 'Thomas', 'Elizabeth'
+];
 
-export interface UserData {
-  id: string;
-  name: string;
-  progress: string;
-  color: string;
+export interface UserData
+{
+    id: string;
+    name: string;
+    progress: string;
+    color: string;
 }
 
 /** An example database that the data source uses to retrieve data for the table. */
-export class ExampleDatabase {
-  /** Stream that emits whenever the data has been modified. */
-  dataChange: BehaviorSubject<UserData[]> = new BehaviorSubject<UserData[]>([]);
-  get data(): UserData[] { return this.dataChange.value; }
+export class ExampleDatabase
+{
+    /** Stream that emits whenever the data has been modified. */
+    dataChange: BehaviorSubject<UserData[]> = new BehaviorSubject<UserData[]>([]);
 
-  constructor() {
-    // Fill up the database with 100 users.
-    for (let i = 0; i < 100; i++) { this.addUser(); }
-  }
+    get data(): UserData[]
+    {
+        return this.dataChange.value;
+    }
 
-  /** Adds a new user to the database. */
-  addUser() {
-    const copiedData = this.data.slice();
-    copiedData.push(this.createNewUser());
-    this.dataChange.next(copiedData);
-  }
+    constructor()
+    {
+        // Fill up the database with 100 users.
+        for ( let i = 0; i < 100; i++ )
+        {
+            this.addUser();
+        }
+    }
 
-  /** Builds and returns a new User. */
-  private createNewUser() {
-    const name =
-        NAMES[Math.round(Math.random() * (NAMES.length - 1))] + ' ' +
-        NAMES[Math.round(Math.random() * (NAMES.length - 1))].charAt(0) + '.';
+    /** Adds a new user to the database. */
+    addUser()
+    {
+        const copiedData = this.data.slice();
+        copiedData.push(this.createNewUser());
+        this.dataChange.next(copiedData);
+    }
 
-    return {
-      id: (this.data.length + 1).toString(),
-      name: name,
-      progress: Math.round(Math.random() * 100).toString(),
-      color: COLORS[Math.round(Math.random() * (COLORS.length - 1))]
-    };
-  }
+    /** Builds and returns a new User. */
+    private createNewUser()
+    {
+        const name =
+                  NAMES[Math.round(Math.random() * (NAMES.length - 1))] + ' ' +
+                  NAMES[Math.round(Math.random() * (NAMES.length - 1))].charAt(0) + '.';
+
+        return {
+            id      : (this.data.length + 1).toString(),
+            name    : name,
+            progress: Math.round(Math.random() * 100).toString(),
+            color   : COLORS[Math.round(Math.random() * (COLORS.length - 1))]
+        };
+    }
 }
 
 /**
@@ -81,26 +99,31 @@ export class ExampleDatabase {
  * the underlying data. Instead, it only needs to take the data and send the table exactly what
  * should be rendered.
  */
-export class ExampleDataSource extends DataSource<any> {
-  constructor(private _exampleDatabase: ExampleDatabase, private _paginator: MdPaginator) {
-    super();
-  }
+export class ExampleDataSource extends DataSource<any>
+{
+    constructor(private _exampleDatabase: ExampleDatabase, private _paginator: MatPaginator)
+    {
+        super();
+    }
 
-  /** Connect function called by the table to retrieve one stream containing the data to render. */
-  connect(): Observable<UserData[]> {
-    const displayDataChanges = [
-      this._exampleDatabase.dataChange,
-      this._paginator.page,
-    ];
+    /** Connect function called by the table to retrieve one stream containing the data to render. */
+    connect(): Observable<UserData[]>
+    {
+        const displayDataChanges = [
+            this._exampleDatabase.dataChange,
+            this._paginator.page
+        ];
 
-    return Observable.merge(...displayDataChanges).map(() => {
-      const data = this._exampleDatabase.data.slice();
+        return Observable.merge(...displayDataChanges).map(() => {
+            const data = this._exampleDatabase.data.slice();
 
-      // Grab the page's slice of data.
-      const startIndex = this._paginator.pageIndex * this._paginator.pageSize;
-      return data.splice(startIndex, this._paginator.pageSize);
-    });
-  }
+            // Grab the page's slice of data.
+            const startIndex = this._paginator.pageIndex * this._paginator.pageSize;
+            return data.splice(startIndex, this._paginator.pageSize);
+        });
+    }
 
-  disconnect() {}
+    disconnect()
+    {
+    }
 }