docs(demos): add dialog demos

src/lib/dialog/dialog.md

@@ -1,7 +1,7 @@
 The `MdDialog` service can be used to open modal dialogs with Material Design styling and 
 animations.
 
-<!-- example(dialog-overview) -->
+<!-- example(dialog-basic) -->
 
 A dialog is opened by calling the `open` method with a component to be loaded and an optional 
 config object. The `open` method will return an instance of `MdDialogRef`:
@@ -45,25 +45,27 @@ If you want to share data with your dialog, you can use the `data` option to pas
 
 ```ts
 let dialogRef = dialog.open(YourDialog, {
-  data: 'your data',
+  data: { name: 'austin' },
 });
 ```
 
 To access the data in your dialog component, you have to use the MD_DIALOG_DATA injection token:
+
 ```ts
 import {Component, Inject} from '@angular/core';
 import {MD_DIALOG_DATA} from '@angular/material';
 
 @Component({
   selector: 'your-dialog',
-  template: 'passed in {{ data }}',
+  template: 'passed in {{ data.name }}',
 })
-
 export class YourDialog {
   constructor(@Inject(MD_DIALOG_DATA) public data: any) { }
 }
 ```
 
+<!-- example(dialog-data) -->
+
 ### Dialog content
 Several directives are available to make it easier to structure your dialog content:
 
@@ -93,6 +95,8 @@ You can control which elements are tab stops with the `tabindex` attribute
 <button md-button tabindex="-1">Not Tabbable</button>
 ```
 
+<!-- example(dialog-content) -->
+
 ### AOT Compilation
 
 Due to the dynamic nature of the `MdDialog`, and its usage of `ViewContainerRef#createComponent()`

src/material-examples/dialog-basic/dialog-basic-example-dialog.html

@@ -0,0 +1 @@
+<p> Hi, I'm a dialog! </p>

src/material-examples/dialog-basic/dialog-basic-example.html

@@ -0,0 +1 @@
+<button md-button (click)="openDialog()">Open dialog</button>

src/material-examples/dialog-basic/dialog-basic-example.ts

@@ -0,0 +1,23 @@
+import {Component} from '@angular/core';
+import {MdDialog} from '@angular/material';
+
+/**
+ * @title Basic Dialog
+ */
+@Component({
+  selector: 'dialog-basic-example',
+  templateUrl: 'dialog-basic-example.html',
+})
+export class DialogBasicExample {
+  constructor(private dialog: MdDialog) {}
+
+  openDialog() {
+    this.dialog.open(DialogBasicExampleDialog);
+  }
+}
+
+@Component({
+  selector: 'dialog-basic-example-dialog',
+  templateUrl: 'dialog-basic-example-dialog.html',
+})
+export class DialogBasicExampleDialog {}

src/material-examples/dialog-content/dialog-content-example-dialog.html

@@ -0,0 +1,7 @@
+<h2 md-dialog-title>Delete all</h2>
+<md-dialog-content>Are you sure?</md-dialog-content>
+<md-dialog-actions>
+  <button md-button tabindex="-1">Not Tabbable</button>
+  <button md-button [md-dialog-close]="true" tabindex="1">Yes</button>
+  <button md-button md-dialog-close tabindex="2">No</button>
+</md-dialog-actions>

src/material-examples/dialog-content/dialog-content-example.css

@@ -0,0 +1 @@
+/** No CSS for this example */

src/material-examples/dialog-content/dialog-content-example.html

@@ -0,0 +1 @@
+<button md-button (click)="openDialog()">Open dialog</button>

src/material-examples/dialog-content/dialog-content-example.ts

@@ -0,0 +1,26 @@
+import {Component} from '@angular/core';
+import {MdDialog} from '@angular/material';
+
+/**
+ * @title Dialog Content
+ */
+@Component({
+  selector: 'dialog-content-example',
+  templateUrl: 'dialog-content-example.html',
+})
+export class DialogContentExample {
+  constructor(public dialog: MdDialog) {}
+
+  openDialog() {
+    const dialogRef = this.dialog.open(DialogContentExampleDialog);
+    dialogRef.afterClosed().subscribe(result => {
+      console.log(`Dialog result: ${result}`);
+    });
+  }
+}
+
+@Component({
+  selector: 'dialog-content-example-dialog',
+  templateUrl: 'dialog-content-example-dialog.html',
+})
+export class DialogContentExampleDialog {}

src/material-examples/dialog-data/dialog-data-example-dialog.html

@@ -0,0 +1,15 @@
+<h1 md-dialog-title>Favorite Animal</h1>
+<div md-dialog-content>
+  My favorite animal is:
+  <ul>
+    <li>
+      <span *ngIf="data.animal === 'panda'">&#10003;</span> Panda
+    </li>
+    <li>
+      <span *ngIf="data.animal === 'unicorn'">&#10003;</span> Unicorn
+    </li>
+    <li>
+      <span *ngIf="data.animal === 'lion'">&#10003;</span> Lion
+    </li>
+  </ul>
+</div>

src/material-examples/dialog-data/dialog-data-example.css

@@ -0,0 +1 @@
+/** No CSS for this example */

src/material-examples/dialog-data/dialog-data-example.html

@@ -0,0 +1 @@
+<button md-button (click)="openDialog()">Open dialog</button>

src/material-examples/dialog-data/dialog-data-example.ts

@@ -0,0 +1,29 @@
+import {Component, Inject} from '@angular/core';
+import {MdDialog, MD_DIALOG_DATA} from '@angular/material';
+
+/**
+ * @title Dialog Data Sharing
+ */
+@Component({
+  selector: 'dialog-data-example',
+  templateUrl: 'dialog-data-example.html',
+})
+export class DialogDataExample {
+  constructor(public dialog: MdDialog) {}
+
+  openDialog() {
+    this.dialog.open(DialogDataExampleDialog, {
+      data: {
+        animal: 'panda'
+      }
+    });
+  }
+}
+
+@Component({
+  selector: 'dialog-data-example-dialog',
+  templateUrl: 'dialog-data-example-dialog.html',
+})
+export class DialogDataExampleDialog {
+  constructor(@Inject(MD_DIALOG_DATA) public data: any) {}
+}

src/material-examples/dialog-overview/dialog-overview-example-dialog.html

@@ -1 +1,11 @@
-<p> Hi, I'm a dialog! </p>
+<h1 md-dialog-title>Hi {{data.name}}</h1>
+<div md-dialog-content>
+  <p>What's your favorite animal?</p>
+  <md-input-container>
+    <input mdInput tabindex="1" [(ngModel)]="data.animal">
+  </md-input-container>
+</div>
+<div md-dialog-actions>
+  <button md-button [md-dialog-close]="data.animal" tabindex="2">Ok</button>
+  <button md-button (click)="onNoClick()" tabindex="-1">No Thanks</button>
+</div>

src/material-examples/dialog-overview/dialog-overview-example.html

@@ -1 +1,13 @@
-<button md-button (click)="openDialog()">Open dialog</button>
+<ol>
+  <li>
+    <md-input-container>
+      <input mdInput [(ngModel)]="name" placeholder="What's your name?">
+    </md-input-container>
+  </li>
+  <li>
+    <button md-raised-button (click)="openDialog()">Pick one</button>
+  </li>
+  <li *ngIf="animal">
+    You chose: <i>{{animal}}</i>
+  </li>
+</ol>

src/material-examples/dialog-overview/dialog-overview-example.ts

@@ -1,24 +1,46 @@
-import {Component} from '@angular/core';
-import {MdDialog} from '@angular/material';
+import {Component, Inject} from '@angular/core';
+import {MdDialog, MdDialogRef, MD_DIALOG_DATA} from '@angular/material';
 
 /**
  * @title Dialog Overview
  */
 @Component({
   selector: 'dialog-overview-example',
-  templateUrl: 'dialog-overview-example.html',
+  templateUrl: 'dialog-overview-example.html'
 })
 export class DialogOverviewExample {
+
+  animal: string;
+  name: string;
+
   constructor(public dialog: MdDialog) {}
 
-  openDialog() {
-    this.dialog.open(DialogOverviewExampleDialog);
+  openDialog(): void {
+    let dialogRef = this.dialog.open(DialogOverviewExampleDialog, {
+      width: '250px',
+      data: { name: this.name, animal: this.animal }
+    });
+
+    dialogRef.afterClosed().subscribe(result => {
+      console.log('The dialog was closed');
+      this.animal = result;
+    });
   }
-}
 
+}
 
 @Component({
   selector: 'dialog-overview-example-dialog',
   templateUrl: 'dialog-overview-example-dialog.html',
 })
-export class DialogOverviewExampleDialog {}
+export class DialogOverviewExampleDialog {
+
+  constructor(
+    public dialogRef: MdDialogRef<DialogOverviewExampleDialog>,
+    @Inject(MD_DIALOG_DATA) public data: any) { }
+
+  onNoClick(): void {
+    this.dialogRef.close();
+  }
+
+}

src/material-examples/example-module.ts

@@ -31,9 +31,11 @@ import {DatepickerMinMaxExample} from './datepicker-min-max/datepicker-min-max-e
 import {DatepickerOverviewExample} from './datepicker-overview/datepicker-overview-example';
 import {DatepickerStartViewExample} from './datepicker-start-view/datepicker-start-view-example';
 import {DatepickerTouchExample} from './datepicker-touch/datepicker-touch-example';
+import {DialogBasicExampleDialog,DialogBasicExample} from './dialog-basic/dialog-basic-example';
+import {DialogContentExampleDialog,DialogContentExample} from './dialog-content/dialog-content-example';
+import {DialogDataExampleDialog,DialogDataExample} from './dialog-data/dialog-data-example';
 import {DialogElementsExampleDialog,DialogElementsExample} from './dialog-elements/dialog-elements-example';
 import {DialogOverviewExampleDialog,DialogOverviewExample} from './dialog-overview/dialog-overview-example';
-import {DialogResultExampleDialog,DialogResultExample} from './dialog-result/dialog-result-example';
 import {GridListDynamicExample} from './grid-list-dynamic/grid-list-dynamic-example';
 import {GridListOverviewExample} from './grid-list-overview/grid-list-overview-example';
 import {IconOverviewExample} from './icon-overview/icon-overview-example';
@@ -189,6 +191,24 @@ export const EXAMPLE_COMPONENTS = {
     additionalFiles: null,
     selectorName: null
   },
+  'dialog-basic': {
+    title: 'Basic Dialog',
+    component: DialogBasicExample,
+    additionalFiles: ["dialog-basic-example-dialog.html"],
+    selectorName: 'DialogBasicExample, DialogBasicExampleDialog'
+  },
+  'dialog-content': {
+    title: 'Dialog Content',
+    component: DialogContentExample,
+    additionalFiles: ["dialog-content-example-dialog.html"],
+    selectorName: 'DialogContentExample, DialogContentExampleDialog'
+  },
+  'dialog-data': {
+    title: 'Dialog Data Sharing',
+    component: DialogDataExample,
+    additionalFiles: ["dialog-data-example-dialog.html"],
+    selectorName: 'DialogDataExample, DialogDataExampleDialog'
+  },
   'dialog-elements': {
     title: 'Dialog elements',
     component: DialogElementsExample,
@@ -201,12 +221,6 @@ export const EXAMPLE_COMPONENTS = {
     additionalFiles: ["dialog-overview-example-dialog.html"],
     selectorName: 'DialogOverviewExample, DialogOverviewExampleDialog'
   },
-  'dialog-result': {
-    title: 'Dialog with a result',
-    component: DialogResultExample,
-    additionalFiles: ["dialog-result-example-dialog.html"],
-    selectorName: 'DialogResultExample, DialogResultExampleDialog'
-  },
   'grid-list-dynamic': {
     title: 'Dynamic grid-list',
     component: GridListDynamicExample,
@@ -498,9 +512,11 @@ export const EXAMPLE_LIST = [
   DatepickerOverviewExample,
   DatepickerStartViewExample,
   DatepickerTouchExample,
+  DialogBasicExampleDialog,DialogBasicExample,
+  DialogContentExampleDialog,DialogContentExample,
+  DialogDataExampleDialog,DialogDataExample,
   DialogElementsExampleDialog,DialogElementsExample,
   DialogOverviewExampleDialog,DialogOverviewExample,
-  DialogResultExampleDialog,DialogResultExample,
   GridListDynamicExample,
   GridListOverviewExample,
   IconOverviewExample,

src/material-examples/material-module.ts

@@ -35,12 +35,12 @@ import {
     MdSliderModule,
     MdSidenavModule,
     MdSnackBarModule,
-    MdTableModule,
     MdTabsModule,
     MdToolbarModule,
     MdTooltipModule,
     MdPaginatorModule,
-    MdSortModule
+    MdSortModule,
+    MdTableModule
   ]
 })
 export class ExampleMaterialModule {}