Experimental alpha10

package.json

@@ -19,15 +19,15 @@
     "@angular/http": "^2.0.0",
     "@angular/platform-browser": "^2.0.0",
     "@angular/platform-browser-dynamic": "^2.0.0",
-    "@angular/material": "2.0.0-alpha.9-3",
+    "@angular/material": "2.0.0-alpha.10",
     "@angular/router": "^3.0.0",
     "core-js": "^2.4.0",
     "rxjs": "5.0.0-beta.12",
     "ts-helpers": "^1.1.1",
     "zone.js": "^0.6.21"
   },
   "devDependencies": {
-    "@angular/compiler-cli": "^0.6.3",
+    "@angular/compiler-cli": "^2.0.0",
     "@angular/platform-server": "^2.0.0",
     "@types/hammerjs": "^2.0.32",
     "@types/jasmine": "^2.2.30",

src/app/app.component.html

@@ -96,26 +96,15 @@ <h3 md-line>{{food.name}}</h3>
 
     <md-card>
       <md-tab-group>
-        <md-tab>
-          <template md-tab-label>
-            Earth
-          </template>
-          <template md-tab-content>
-            <p>EARTH</p>
-          </template>
+        <md-tab label="Earth">
+          <p>EARTH</p>
         </md-tab>
-        <md-tab>
-          <template md-tab-label>
-            Fire
-          </template>
-          <template md-tab-content>
-            <p>FIRE</p>
-          </template>
+        <md-tab label="Fire">
+          <p>FIRE</p>
         </md-tab>
       </md-tab-group>
     </md-card>
 
-
     <md-card>
       <md-icon>build</md-icon>
     </md-card>
@@ -132,6 +121,12 @@ <h3 md-line>{{food.name}}</h3>
       <button md-menu-item>Banana</button>
     </md-menu>
 
+    <md-card>
+      <p>Last dialog result: {{lastDialogResult}}</p>
+      <button md-raised-button (click)="openDialog()">DIALOG</button>
+      <button md-raised-button (click)="showSnackbar()">SNACKBAR</button>
+    </md-card>
+
   </div>
 
 </md-sidenav-layout>

src/app/app.component.ts

@@ -1,4 +1,5 @@
-import {Component} from '@angular/core';
+import {Component, Optional} from '@angular/core';
+import {MdDialog, MdDialogRef, MdSnackBar} from '@angular/material';
 
 
 @Component({
@@ -8,6 +9,7 @@ import {Component} from '@angular/core';
 })
 export class Material2AppAppComponent {
   isDarkTheme: boolean = false;
+  lastDialogResult: string;
 
   foods: any[] = [
     {name: 'Pizza', rating: 'Excellent'},
@@ -17,10 +19,39 @@ export class Material2AppAppComponent {
 
   progress: number = 0;
 
-  constructor() {
+  constructor(private _dialog: MdDialog, private _snackbar: MdSnackBar) {
     // Update the value for the progress-bar on an interval.
     setInterval(() => {
       this.progress = (this.progress + Math.floor(Math.random() * 4) + 1) % 100;
     }, 200);
   }
+
+  openDialog() {
+    let dialogRef = this._dialog.open(DialogContent);
+
+    dialogRef.afterClosed().subscribe(result => {
+      this.lastDialogResult = result;
+    })
+  }
+
+  showSnackbar() {
+    this._snackbar.open('YUM SNACKS', 'CHEW');
+  }
+}
+
+
+@Component({
+  template: `
+    <p>This is a dialog</p>
+    <p>
+      <label>
+        This is a text box inside of a dialog.
+        <input #dialogInput>
+      </label>
+    </p>
+    <p> <button md-button (click)="dialogRef.close(dialogInput.value)">CLOSE</button> </p>
+  `,
+})
+export class DialogContent {
+  constructor(@Optional() public dialogRef: MdDialogRef<DialogContent>) { }
 }

src/app/app.module.ts

@@ -1,14 +1,15 @@
 import {NgModule} from '@angular/core';
 import {BrowserModule} from '@angular/platform-browser';
 import {MaterialModule} from '@angular/material';
-import {Material2AppAppComponent} from './app.component';
+import {Material2AppAppComponent, DialogContent} from './app.component';
 
 @NgModule({
   imports: [
     BrowserModule,
     MaterialModule.forRoot(),
   ],
-  declarations: [Material2AppAppComponent],
+  declarations: [Material2AppAppComponent, DialogContent],
+  entryComponents: [DialogContent],
   bootstrap: [Material2AppAppComponent],
 })
 export class MaterialAppModule { }