diff --git a/src/examples/dialog-elements/dialog-elements-example-dialog.html b/src/examples/dialog-elements/dialog-elements-example-dialog.html
new file mode 100644
index 00000000000..5238b0eb6c1
--- /dev/null
+++ b/src/examples/dialog-elements/dialog-elements-example-dialog.html
@@ -0,0 +1,5 @@
+
Dialog with elements
+This dialog showcases the title, close, content and actions elements.
+
+
+
diff --git a/src/examples/dialog-elements/dialog-elements-example.css b/src/examples/dialog-elements/dialog-elements-example.css
new file mode 100644
index 00000000000..7432308753e
--- /dev/null
+++ b/src/examples/dialog-elements/dialog-elements-example.css
@@ -0,0 +1 @@
+/** No CSS for this example */
diff --git a/src/examples/dialog-elements/dialog-elements-example.html b/src/examples/dialog-elements/dialog-elements-example.html
new file mode 100644
index 00000000000..40637c4bd63
--- /dev/null
+++ b/src/examples/dialog-elements/dialog-elements-example.html
@@ -0,0 +1 @@
+
diff --git a/src/examples/dialog-elements/dialog-elements-example.ts b/src/examples/dialog-elements/dialog-elements-example.ts
new file mode 100644
index 00000000000..aba941a571b
--- /dev/null
+++ b/src/examples/dialog-elements/dialog-elements-example.ts
@@ -0,0 +1,22 @@
+import {Component} from '@angular/core';
+import {MdDialog} from '@angular/material';
+
+
+@Component({
+ selector: 'dialog-elements-example',
+ templateUrl: './dialog-elements-example.html',
+})
+export class DialogElementsExample {
+ constructor(public dialog: MdDialog) { }
+
+ openDialog() {
+ this.dialog.open(DialogElementsExampleDialog);
+ }
+}
+
+
+@Component({
+ selector: 'dialog-elements-example-dialog',
+ templateUrl: './dialog-elements-example-dialog.html',
+})
+export class DialogElementsExampleDialog { }
diff --git a/src/examples/example-module.ts b/src/examples/example-module.ts
index 548c8d00085..60293aeb56f 100644
--- a/src/examples/example-module.ts
+++ b/src/examples/example-module.ts
@@ -39,6 +39,10 @@ import {
DialogResultExampleDialog,
DialogResultExample
} from './dialog-result/dialog-result-example';
+import {
+ DialogElementsExampleDialog,
+ DialogElementsExample
+} from './dialog-elements/dialog-elements-example';
import {TooltipOverviewExample} from './tooltip-overview/tooltip-overview-example';
import {ButtonToggleOverviewExample} from './button-toggle-overview/button-toggle-overview-example';
import {GridListOverviewExample} from './grid-list-overview/grid-list-overview-example';
@@ -100,11 +104,17 @@ export const EXAMPLE_COMPONENTS = {
selectorName: 'DialogOverviewExample, DialogOverviewExampleDialog',
},
'dialog-result': {
- title: 'Dailog with a result',
+ title: 'Dialog with a result',
component: DialogResultExample,
additionalFiles: ['dialog-result-example-dialog.html'],
selectorName: 'DialogResultExample, DialogResultExampleDialog',
},
+ 'dialog-elements': {
+ title: 'Dialog elements',
+ component: DialogElementsExample,
+ additionalFiles: ['dialog-elements-example-dialog.html'],
+ selectorName: 'DialogElementsExample, DialogElementsExampleDialog',
+ },
'grid-list-dynamic': {title: 'Dynamic grid-list', component: GridListDynamicExample},
'grid-list-overview': {title: 'Basic grid-list', component: GridListOverviewExample},
'icon-overview': {title: 'Basic icons', component: IconOverviewExample},
@@ -173,6 +183,8 @@ export const EXAMPLE_LIST = [
DialogOverviewExampleDialog,
DialogResultExample,
DialogResultExampleDialog,
+ DialogElementsExample,
+ DialogElementsExampleDialog,
GridListDynamicExample,
GridListOverviewExample,
IconOverviewExample,