diff --git a/package.json b/package.json index 968c179..a8a9fca 100644 --- a/package.json +++ b/package.json @@ -19,7 +19,7 @@ "@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", @@ -27,7 +27,7 @@ "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", diff --git a/src/app/app.component.html b/src/app/app.component.html index 0424b95..8ff8b53 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -96,26 +96,15 @@

{{food.name}}

- - - + +

EARTH

- - - + +

FIRE

- build @@ -132,6 +121,12 @@

{{food.name}}

+ +

Last dialog result: {{lastDialogResult}}

+ + +
+ diff --git a/src/app/app.component.ts b/src/app/app.component.ts index e90817c..2b8e45b 100644 --- a/src/app/app.component.ts +++ b/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: ` +

This is a dialog

+

+ +

+

+ `, +}) +export class DialogContent { + constructor(@Optional() public dialogRef: MdDialogRef) { } } diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 435d3ef..8f52970 100644 --- a/src/app/app.module.ts +++ b/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 { }