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 ``` + + ### 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.

+
+ + + + 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 @@ + 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: + +
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 @@ + 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?

+ + + +
+
+ + +
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 @@ - +
    +
  1. + + + +
  2. +
  3. + +
  4. +
  5. + You chose: {{animal}} +
  6. +
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?
-
- - -
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 @@ - -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 {}