md-dialog
jelbourn opened this issue · comments
Depends on #113
For alpha.6:
- Design doc
- Basic initial implementation
This is the component that I'm needing more. :) 👍
I also need this. Waiting for this. 👍
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.
Any estimates on that?
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).
Hi @jelbourn!
The basic dialog is working already. However, it is not published in npm. May you publish it?
It's missing some pieces @andvasp, like backdrop. It still more of a prototype than anything that could be released.
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)
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;
});
Any news about releasing this? The depending issue is closed (to be splitted further though).
Adding my +1. This is a big one. Anxiously and excitedly waiting for it. Hope we get an official release soon.
Remaining work before initial release:
- Backdrop (#1041)
- Focus trapping
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...
IT would be great if we can have this in the next release
@jelbourn Is the intention to allow MdDialog to work with overlay position strategies other than global? I noticed that you're capturing the ViewContainerRef but it seems it currently only being used for maintaining the injector hierarchy, rather than positioning. Would be great if we could place the dialog within a specific container, so that the overlay doesn't have to be global all the time.
i tried MdDialog with rc5 . It gave error
EXCEPTION: Error: Uncaught (in promise): No provider for Token overlayContainer! browser_adapter.ts:82
import {Component} from '@angular/core';
import {MdDialog} from '@angular2-material/dialog/dialog';
import {Overlay} from '@angular2-material/core/overlay/overlay';
@component({
moduleId:__moduleName,
selector: 'iPopup',
templateUrl: 'iPopup.html',
styleUrls: ['iPopup.css'],
directives: [MdDialog],
providers:[Overlay]
})
Is there a close method on the current released alpha.9-3?
As I see here:
https://github.com/angular/material2/blob/master/src/lib/dialog/dialog.ts
There's no close method but on the other hand things that are in comments marked as todo (like close on esc etc) works.
Close is on the MdDialogRef that you get back from opening it.
You can check the demo code here: https://github.com/angular/material2/tree/master/src/demo-app/dialog
Hi, When do you plan to release md-dialog in npm?
@cpena material2 is now found at @angular/material on npm. md-dialog is included in that package.
Is the NPM version up to 9 yet? NPM versioning looks like its still back
at alpha.8-2
On Mon, Oct 17, 2016 at 12:29 PM, Noah Wood notifications@github.com
wrote:
@cpena https://github.com/cpena material2 is now found at @angular/material
https://www.npmjs.com/package/%40angular%2Fmaterial on npm. md-dialog
is included in that package.—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
#114 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/ACv1Dd0Nv_jbS0swfqFzk8WkR33JxRFBks5q08yRgaJpZM4HkX5c
.
It's on alpha.9-3 now.
@goelinsights Yes. The npm package at @angular/material is at 2.0.0-alpha.9-3. The old package at @angular2-material is the one at alpha-8.2.
What webpack version should I use to run this dialog in my project?
@Ranguro you can use any. Just use @angular/material 2.0.0-alpha.9-3 and up. Try StackOverflow for more support on such questions though ;)
Is it possible to passing data to the component? via @input() or something else?
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:
- If 'md-dialog' is an Angular component, then verify that it is part of this module.
- If 'md-dialog' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("
"): CompanyComponent@32:0 ; Zone: ; Task: Promise.then ; Value: Error: Template parse errors:(…) Error: Template parse errors:
'md-dialog' is not a known element:
- If 'md-dialog' is an Angular component, then verify that it is part of this module.
- If 'md-dialog' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("
"): 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`
MdDialog is a service, not a @Component
A quick example code would be most helpful
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
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.
Looks like someone wrote up an example just today: http://stackoverflow.com/a/40185852/550975
There is an example here in the demo-app in this repository. https://github.com/angular/material2/tree/master/src/demo-app/dialog
@serjster, you can read this article as well https://medium.com/@tarik.nzl/making-use-of-dialogs-in-material-2-mddialog-7533d27df41
@reinos You can pass in the config parameters I guess your object and you can use them then.
Closing this issue now and going to track remaining work through separate issues
Is there a way to make the content scrollable within the dialog?
@nak411, try with css.
Something like:
md-dialog-container {
overflow: auto;
height: 300px;
}
or perhaps similar to that on your component.
is there any way to pass data to dialog ?
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 ?!
I think if there is class property in MdDialogConfig will be much easier , thanks @fxck anyway .
How can I notify to parent from dialog?
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?
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.
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.