@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-basic/table-basic-example.css

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

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

@@ -1,34 +1,34 @@
 <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" -->
 
-    <!-- Position Column -->
-    <ng-container mdColumnDef="position">
-      <md-header-cell *mdHeaderCellDef> No. </md-header-cell>
-      <md-cell *mdCellDef="let element"> {{element.position}} </md-cell>
-    </ng-container>
+        <!-- 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>
 
-    <!-- Name Column -->
-    <ng-container mdColumnDef="name">
-      <md-header-cell *mdHeaderCellDef> Name </md-header-cell>
-      <md-cell *mdCellDef="let element"> {{element.name}} </md-cell>
-    </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>
 
-    <!-- Weight Column -->
-    <ng-container mdColumnDef="weight">
-      <md-header-cell *mdHeaderCellDef> Weight </md-header-cell>
-      <md-cell *mdCellDef="let element"> {{element.weight}} </md-cell>
-    </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>
 
-    <!-- Color Column -->
-    <ng-container mdColumnDef="symbol">
-      <md-header-cell *mdHeaderCellDef> Symbol </md-header-cell>
-      <md-cell *mdCellDef="let element"> {{element.symbol}} </md-cell>
-    </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>
 
-    <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>
 </div>

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

@@ -1,49 +1,131 @@
-import {Component} from '@angular/core';
-import {DataSource} from '@angular/cdk/collections';
-import {Observable} from 'rxjs/Observable';
+import { Component } from '@angular/core';
+import { DataSource } from '@angular/cdk/collections';
+import { Observable } from 'rxjs/Observable';
 import 'rxjs/add/observable/of';
 
 /**
  * @title Basic table
  */
 @Component({
-  selector: 'table-basic-example',
-  styleUrls: ['table-basic-example.css'],
-  templateUrl: 'table-basic-example.html',
+    selector   : 'table-basic-example',
+    styleUrls  : ['table-basic-example.css'],
+    templateUrl: 'table-basic-example.html'
 })
-export class TableBasicExample {
-  displayedColumns = ['position', 'name', 'weight', 'symbol'];
-  dataSource = new ExampleDataSource();
+export class TableBasicExample
+{
+    displayedColumns = ['position', 'name', 'weight', 'symbol'];
+    dataSource = new ExampleDataSource();
 }
 
-export interface Element {
-  name: string;
-  position: number;
-  weight: number;
-  symbol: string;
+export interface Element
+{
+    name: string;
+    position: number;
+    weight: number;
+    symbol: string;
 }
 
 const 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'
+    }
 ];
 
 /**
@@ -52,11 +134,15 @@ const data: Element[] = [
  * altered, the observable should emit that new set of data on the stream. In our case here,
  * we return a stream that contains only one set of data that doesn't change.
  */
-export class ExampleDataSource extends DataSource<any> {
-  /** Connect function called by the table to retrieve one stream containing the data to render. */
-  connect(): Observable<Element[]> {
-    return Observable.of(data);
-  }
+export class ExampleDataSource extends DataSource<any>
+{
+    /** Connect function called by the table to retrieve one stream containing the data to render. */
+    connect(): Observable<Element[]>
+    {
+        return Observable.of(data);
+    }
 
-  disconnect() {}
+    disconnect()
+    {
+    }
 }