diff --git a/src/lib/dialog/dialog.md b/src/lib/dialog/dialog.md
index 35afa748b97..0df81ac0ec1 100644
--- a/src/lib/dialog/dialog.md
+++ b/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) { }
}
```
+
+
### 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
Not Tabbable
```
+
+
### 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]
diff --git a/src/material-examples/dialog-content/dialog-content-example-dialog.html b/src/material-examples/dialog-content/dialog-content-example-dialog.html
new file mode 100644
index 00000000000..46c978dae38
--- /dev/null
+++ b/src/material-examples/dialog-content/dialog-content-example-dialog.html
@@ -0,0 +1,25 @@
+
Install Angular
+
+ DEVELOP ACROSS ALL PLATFORMS
+ 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.
+
+ SPEED & PERFORMANCE
+ 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.
+
+ INCREDIBLE TOOLING
+ 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.
+
+ LOVED BY MILLIONS
+ From prototype through global deployment, Angular delivers the productivity and scalable infrastructure
+ that supports Google's largest applications.
+
+
+ Install
+ Cancel
+
diff --git a/src/material-examples/dialog-result/dialog-result-example.css b/src/material-examples/dialog-content/dialog-content-example.css
similarity index 100%
rename from src/material-examples/dialog-result/dialog-result-example.css
rename to src/material-examples/dialog-content/dialog-content-example.css
diff --git a/src/material-examples/dialog-content/dialog-content-example.html b/src/material-examples/dialog-content/dialog-content-example.html
new file mode 100644
index 00000000000..176a3c411e7
--- /dev/null
+++ b/src/material-examples/dialog-content/dialog-content-example.html
@@ -0,0 +1 @@
+Open dialog
diff --git a/src/material-examples/dialog-content/dialog-content-example.ts b/src/material-examples/dialog-content/dialog-content-example.ts
new file mode 100644
index 00000000000..39b0d453ddf
--- /dev/null
+++ b/src/material-examples/dialog-content/dialog-content-example.ts
@@ -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 {}
diff --git a/src/material-examples/dialog-data/dialog-data-example-dialog.html b/src/material-examples/dialog-data/dialog-data-example-dialog.html
new file mode 100644
index 00000000000..aa9b428ef8c
--- /dev/null
+++ b/src/material-examples/dialog-data/dialog-data-example-dialog.html
@@ -0,0 +1,15 @@
+Favorite Animal
+
+ My favorite animal is:
+
+
+ ✓ Panda
+
+
+ ✓ Unicorn
+
+
+ ✓ Lion
+
+
+
diff --git a/src/material-examples/dialog-data/dialog-data-example.css b/src/material-examples/dialog-data/dialog-data-example.css
new file mode 100644
index 00000000000..7432308753e
--- /dev/null
+++ b/src/material-examples/dialog-data/dialog-data-example.css
@@ -0,0 +1 @@
+/** No CSS for this example */
diff --git a/src/material-examples/dialog-data/dialog-data-example.html b/src/material-examples/dialog-data/dialog-data-example.html
new file mode 100644
index 00000000000..176a3c411e7
--- /dev/null
+++ b/src/material-examples/dialog-data/dialog-data-example.html
@@ -0,0 +1 @@
+Open dialog
diff --git a/src/material-examples/dialog-data/dialog-data-example.ts b/src/material-examples/dialog-data/dialog-data-example.ts
new file mode 100644
index 00000000000..bdd0f4bc119
--- /dev/null
+++ b/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 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) {}
+}
diff --git a/src/material-examples/dialog-overview/dialog-overview-example-dialog.html b/src/material-examples/dialog-overview/dialog-overview-example-dialog.html
index 751e1339b43..7c6ae49d137 100644
--- a/src/material-examples/dialog-overview/dialog-overview-example-dialog.html
+++ b/src/material-examples/dialog-overview/dialog-overview-example-dialog.html
@@ -1 +1,11 @@
- Hi, I'm a dialog!
+Hi {{data.name}}
+
+
What's your favorite animal?
+
+
+
+
+
+ Ok
+ No Thanks
+
diff --git a/src/material-examples/dialog-overview/dialog-overview-example.html b/src/material-examples/dialog-overview/dialog-overview-example.html
index 176a3c411e7..903b77b0f5d 100644
--- a/src/material-examples/dialog-overview/dialog-overview-example.html
+++ b/src/material-examples/dialog-overview/dialog-overview-example.html
@@ -1 +1,13 @@
-Open dialog
+
+
+
+
+
+
+
+ Pick one
+
+
+ You chose: {{animal}}
+
+
diff --git a/src/material-examples/dialog-overview/dialog-overview-example.ts b/src/material-examples/dialog-overview/dialog-overview-example.ts
index 6e88f61cf48..5dec934d877 100644
--- a/src/material-examples/dialog-overview/dialog-overview-example.ts
+++ b/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,
+ @Inject(MD_DIALOG_DATA) public data: any) { }
+
+ onNoClick(): void {
+ this.dialogRef.close();
+ }
+
+}
diff --git a/src/material-examples/dialog-result/dialog-result-example-dialog.html b/src/material-examples/dialog-result/dialog-result-example-dialog.html
deleted file mode 100644
index 50d5982b839..00000000000
--- a/src/material-examples/dialog-result/dialog-result-example-dialog.html
+++ /dev/null
@@ -1,6 +0,0 @@
-Dialog
-What would you like to do?
-
- Option 1
- Option 2
-
diff --git a/src/material-examples/dialog-result/dialog-result-example.html b/src/material-examples/dialog-result/dialog-result-example.html
deleted file mode 100644
index 04850b42d24..00000000000
--- a/src/material-examples/dialog-result/dialog-result-example.html
+++ /dev/null
@@ -1,2 +0,0 @@
-Launch dialog
-You chose: {{selectedOption}}
diff --git a/src/material-examples/dialog-result/dialog-result-example.ts b/src/material-examples/dialog-result/dialog-result-example.ts
deleted file mode 100644
index 8f2cc8acac1..00000000000
--- a/src/material-examples/dialog-result/dialog-result-example.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import {Component} from '@angular/core';
-import {MdDialog, MdDialogRef} from '@angular/material';
-
-/**
- * @title Dialog with a result
- */
-@Component({
- selector: 'dialog-result-example',
- templateUrl: 'dialog-result-example.html',
-})
-export class DialogResultExample {
- selectedOption: string;
-
- constructor(public dialog: MdDialog) {}
-
- openDialog() {
- let dialogRef = this.dialog.open(DialogResultExampleDialog);
- dialogRef.afterClosed().subscribe(result => {
- this.selectedOption = result;
- });
- }
-}
-
-
-@Component({
- selector: 'dialog-result-example-dialog',
- templateUrl: 'dialog-result-example-dialog.html',
-})
-export class DialogResultExampleDialog {
- constructor(public dialogRef: MdDialogRef) {}
-}
diff --git a/src/material-examples/example-module.ts b/src/material-examples/example-module.ts
index 9850814f55b..07bda41ad4a 100644
--- a/src/material-examples/example-module.ts
+++ b/src/material-examples/example-module.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,
diff --git a/src/material-examples/material-module.ts b/src/material-examples/material-module.ts
index 929d8cfed2c..2d6e3da7fa5 100644
--- a/src/material-examples/material-module.ts
+++ b/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 {}