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>