docs(demos): add more dialog demos (#5666)

Author: amcdnl

src/lib/dialog/dialog.md

@@ -22,7 +22,6 @@ dialogRef.afterClosed().subscribe(result => {
 });
 
 dialogRef.close('Pizza!');
-
 ```
 
 Components created via `MdDialog` can _inject_ `MdDialogRef` and use it to close the dialog
@@ -45,25 +44,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 +94,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()`
@@ -116,7 +119,7 @@ that the AOT compiler knows to create the `ComponentFactory` for it.
 
   entryComponents: [
     ExampleDialogComponent
-  ]
+  ],
 
   providers: [],
   bootstrap: [AppComponent]

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

@@ -0,0 +1,25 @@
+<h2 md-dialog-title>Install Angular</h2>
+<md-dialog-content>
+  <h3>DEVELOP ACROSS ALL PLATFORMS</h3>
+  <p>Learn one way to build applications with Angular and reuse your code and abilities to build 
+    apps for any deployment target. For web, mobile web, native mobile and native desktop.</p>
+  
+  <h3>SPEED & PERFORMANCE</h3>
+  <p>Achieve the maximum speed possible on the Web Platform today, and take it further, via Web 
+    Workers and server-side rendering. Angular puts you in control over scalability. Meet huge data requirements 
+    by building data models on RxJS, Immutable.js or another push-model.</p>
+  
+  <h3>INCREDIBLE TOOLING</h3>
+  <p>Build features quickly with simple, declarative templates. Extend the template language with your own 
+    components and use a wide array of existing components. Get immediate Angular-specific help and feedback 
+    with nearly every IDE and editor. All this comes together so you can focus on building amazing apps rather 
+    than trying to make the code work.</p>
+  
+  <h3>LOVED BY MILLIONS</h3>
+  <p>From prototype through global deployment, Angular delivers the productivity and scalable infrastructure 
+    that supports Google's largest applications.</p>
+</md-dialog-content>
+<md-dialog-actions>
+  <button md-button [md-dialog-close]="true" tabindex="1">Install</button>
+  <button md-button md-dialog-close tabindex="-1">Cancel</button>
+</md-dialog-actions>

src/material-examples/dialog-result/dialog-result-example.css renamed to src/material-examples/dialog-content/dialog-content-example.css

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

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

@@ -0,0 +1,29 @@
+import {Component} from '@angular/core';
+import {MdDialog} from '@angular/material';
+
+/**
+ * @title Dialog with header, scrollable content and actions
+ */
+@Component({
+  selector: 'dialog-content-example',
+  templateUrl: 'dialog-content-example.html',
+})
+export class DialogContentExample {
+  constructor(public dialog: MdDialog) {}
+
+  openDialog() {
+    const dialogRef = this.dialog.open(DialogContentExampleDialog, {
+      height: '350px'
+    });
+
+    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-content/dialog-content-example.ts

@@ -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-dialog.html

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

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

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

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

@@ -0,0 +1,29 @@
+import {Component, Inject} from '@angular/core';
+import {MdDialog, MD_DIALOG_DATA} from '@angular/material';
+
+/**
+ * @title Injecting data when opening a dialog
+ */
+@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-data/dialog-data-example.ts

@@ -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-dialog.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.html

@@ -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/dialog-overview/dialog-overview-example.ts

@@ -31,9 +31,10 @@ 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 {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 +190,18 @@ export const EXAMPLE_COMPONENTS = {
     additionalFiles: null,
     selectorName: null
   },
+  'dialog-content': {
+    title: 'Dialog with header, scrollable content and actions',
+    component: DialogContentExample,
+    additionalFiles: ["dialog-content-example-dialog.html"],
+    selectorName: 'DialogContentExample, DialogContentExampleDialog'
+  },
+  'dialog-data': {
+    title: 'Injecting data when opening a dialog',
+    component: DialogDataExample,
+    additionalFiles: ["dialog-data-example-dialog.html"],
+    selectorName: 'DialogDataExample, DialogDataExampleDialog'
+  },
   'dialog-elements': {
     title: 'Dialog elements',
     component: DialogElementsExample,
@@ -201,12 +214,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 +505,10 @@ export const EXAMPLE_LIST = [
   DatepickerOverviewExample,
   DatepickerStartViewExample,
   DatepickerTouchExample,
+  DialogContentExampleDialog,DialogContentExample,
+  DialogDataExampleDialog,DialogDataExample,
   DialogElementsExampleDialog,DialogElementsExample,
   DialogOverviewExampleDialog,DialogOverviewExample,
-  DialogResultExampleDialog,DialogResultExample,
   GridListDynamicExample,
   GridListOverviewExample,
   IconOverviewExample,

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

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