md-dialog

[jelbourn]

Depends on #113

[jelbourn]

For alpha.6:

• Design doc
• Basic initial implementation

[andvasp]

This is the component that I'm needing more. :) 👍

[ashu2k6k]

I also need this. Waiting for this. 👍

[vifore]

We all wait this. @jelbourn, can you merge this early?
I planned my project to use this in alpha.6, but it delayed too much.
Thank you for all your jobs.

[vagonpidarasov]

Any estimates on that?

[fxck]

Is there a design doc somewhere @jelbourn ? Looking at the way the public API looks at the moment(https://github.com/angular/material2/blob/master/src/demo-app/dialog/dialog-demo.ts) I'm afraid it's not gonna be too reactive approach friendly(particularly controlling the dialog state with something like @ngrx/store).

[andvasp]

Hi @jelbourn!

The basic dialog is working already. However, it is not published in npm. May you publish it?

[fxck]

It's missing some pieces @andvasp, like backdrop. It still more of a prototype than anything that could be released.

[ghost]

The dialog works, but it appears that there is no way to pass data to the component inside, am I wrong? Like when you call it like this:

this.dialog.open(StandardDialog, config)

[ghost]

Oh nevermind. For future readers, it's possible to edit the instance of the StandardDialog (custom) class by editing dialogRef like this:

this.dialog.open(StandardDialog, config)
         .then(res => {
            this.dialogRef = res;
            this.dialogRef.componentInstance.title = title;
            this.dialogRef.componentInstance.contents = contents;
         });

[vapits]

Any news about releasing this? The depending issue is closed (to be splitted further though).

[kevinkoperski]

Adding my +1. This is a big one. Anxiously and excitedly waiting for it. Hope we get an official release soon.

[jelbourn]

Remaining work before initial release:

• Backdrop (feat(dialog): add backdrop #1041)
• Focus trapping

[DennisSmolek]

With #1041 being LGTM would it be possible to get this out on the next release? I know focus trapping is important to ARIA and accessibility but so much is built on md-dialog that it's one big thing keeping us using ng2 or other hacks.. We can just use the PR but I was hoping that we could at least get it on the NPM...

[reinos]

Is it possible to passing data to the component? via @input() or something else?

[SergeySagan]

I have material 2.0.0-alpha.9-3 and trying to use md-dialog I get an error:

`polyfills.bundle.js:7625 Unhandled Promise rejection: Template parse errors:
'md-dialog' is not a known element:

1. If 'md-dialog' is an Angular component, then verify that it is part of this module.
2. If 'md-dialog' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("
   

[ERROR ->] Test

"): CompanyComponent@32:0 ; Zone: ; Task: Promise.then ; Value: Error: Template parse errors:(…) Error: Template parse errors:
'md-dialog' is not a known element:

1. If 'md-dialog' is an Angular component, then verify that it is part of this module.
2. If 'md-dialog' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("
   

[ERROR ->] Test

"): CompanyComponent@32:0
at TemplateParser.parse (http://localhost:35606/dist/vendor.bundle.js:8707:22)
at RuntimeCompiler._compileTemplate (http://localhost:35606/dist/vendor.bundle.js:17029:54)
at http://localhost:35606/dist/vendor.bundle.js:16951:86
at Set.forEach (native)
at compile (http://localhost:35606/dist/vendor.bundle.js:16951:50)
at ZoneDelegate.invoke (http://localhost:35606/dist/polyfills.bundle.js:7473:29)
at Zone.run (http://localhost:35606/dist/polyfills.bundle.js:7366:44)
at http://localhost:35606/dist/polyfills.bundle.js:7732:58
at ZoneDelegate.invokeTask (http://localhost:35606/dist/polyfills.bundle.js:7506:38)
at Zone.runTask (http://localhost:35606/dist/polyfills.bundle.js:7406:48)
at drainMicroTaskQueue (http://localhost:35606/dist/polyfills.bundle.js:7638:36)consoleError @ polyfills.bundle.js:7625_loop_1 @ polyfills.bundle.js:7652drainMicroTaskQueue @ polyfills.bundle.js:7656
polyfills.bundle.js:7627 Error: Uncaught (in promise): Error: Template parse errors:(…)consoleError @ polyfills.bundle.js:7627_loop_1 @ polyfills.bundle.js:7652drainMicroTaskQueue @ polyfills.bundle.js:7656`

[jelbourn]

MdDialog is a service, not a @Component

[SergeySagan]

A quick example code would be most helpful

[jelbourn]

Don't have docs for it yet, but the unit test might be helpful:
https://github.com/angular/material2/blob/master/src/lib/dialog/dialog.spec.ts#L50

[fxck]

I still think it should be both component and service. Both have use cases, and for me, having global state management, I'd prefer component 90% of time.

[SergeySagan]

Looks like someone wrote up an example just today: http://stackoverflow.com/a/40185852/550975

[andvasp]

There is an example here in the demo-app in this repository. https://github.com/angular/material2/tree/master/src/demo-app/dialog

[leocaseiro]

@serjster, you can read this article as well https://medium.com/@tarik.nzl/making-use-of-dialogs-in-material-2-mddialog-7533d27df41

[vapits]

@reinos You can pass in the config parameters I guess your object and you can use them then.

[jelbourn]

Closing this issue now and going to track remaining work through separate issues

[nak411]

Is there a way to make the content scrollable within the dialog?

[leocaseiro]

@nak411, try with css.

Something like:

md-dialog-container {
    overflow: auto;
    height: 300px;
}


or perhaps similar to that on your component.

[ermarkar]

is there any way to pass data to dialog ?

[fxck]

https://github.com/angular/material2/issues?utf8=%E2%9C%93&q=passing%20data%20

[AbdallahBedir]

I want to add custom css class to “.mat-dialog-container” to customize it’s background because I have more than one dialog , there is no class property in MdDialogConfig class ?!

[fxck]

#3472

[AbdallahBedir]

I think if there is class property in MdDialogConfig will be much easier , thanks @fxck anyway .

[ermarkar]

How can I notify to parent from dialog?

[shuzootani]

@ermarkar Have you got any idea ? I wanna know that too...

[ermarkar]

@shuzootani
Here is the answer
http://stackoverflow.com/questions/42717508/how-to-communicate-from-angular-material2-dialog-to-its-parent

[stuarthallows]

If a dialog is set to allow dismissal by clicking outside the dialog is it possible to prevent its dismissal, for example in the case where the dialog contains a form which has not been saved - in which case I'd want to ask the user first if they want to save it?

[fxck]

@stuarthallows #3460

[michal-kroliczek]

Hi why after upgrade to beta.3 I can not see MdDialogRef.options anymore? I was passing some data this way and now after upgrading to angular 4 and beta 3 of material I do not know how to pass.

[fxck]

https://github.com/angular/material2/issues?utf8=%E2%9C%93&q=dialog%20data

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}