md-dialog #114

jelbourn opened this Issue Feb 27, 2016 · 41 comments


None yet

Depends on #113

@jelbourn jelbourn added the feature label Feb 27, 2016
@jelbourn jelbourn added this to the before beta milestone Feb 27, 2016
@jelbourn jelbourn changed the title from mdDialog to md-dialog Feb 27, 2016
@jelbourn jelbourn added the blocked label Mar 9, 2016
@iloveyo123u1 iloveyo123u1 referenced this issue May 19, 2016

mdDialog #470

@jelbourn jelbourn removed the blocked label May 25, 2016
@jelbourn jelbourn modified the milestone: alpha.6, before beta May 25, 2016

For alpha.6:

  • Design doc
  • Basic initial implementation
@jelbourn jelbourn self-assigned this May 25, 2016
andvasp commented May 26, 2016

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

ashu2k6k commented Jun 9, 2016

I also need this. Waiting for this. 👍

@fxck fxck referenced this issue Jun 10, 2016

[Feature] Menu #666

@jelbourn jelbourn modified the milestone: alpha.6, alpha.7 Jun 27, 2016
vifore commented Jul 13, 2016

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?

fxck commented Aug 3, 2016

Is there a design doc somewhere @jelbourn ? Looking at the way the public API looks at the moment( I'm afraid it's not gonna be too reactive approach friendly(particularly controlling the dialog state with something like @ngrx/store).

andvasp commented Aug 11, 2016

Hi @jelbourn!

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

fxck commented Aug 11, 2016

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

Mc128k commented Aug 21, 2016

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:, config)
Mc128k commented Aug 21, 2016

Oh nevermind. For future readers, it's possible to edit the instance of the StandardDialog (custom) class by editing dialogRef like this:, config)
         .then(res => {
            this.dialogRef = res;
            this.dialogRef.componentInstance.title = title;
            this.dialogRef.componentInstance.contents = contents;
vapits commented Aug 22, 2016

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

@jelbourn jelbourn referenced this issue Aug 24, 2016

md-dialog #1110


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

jelbourn commented Sep 1, 2016

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.

vapits commented Sep 20, 2016

#113 is closed & #1041 is merged.
Both for a while now, what are the news on this?

@kokokenada kokokenada referenced this issue in valor-software/ng2-bootstrap Sep 24, 2016

Dynamic Component creation helper a service #1009


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';
selector: 'iPopup',
templateUrl: 'iPopup.html',
styleUrls: ['iPopup.css'],
directives: [MdDialog],


vapits commented Oct 7, 2016

Is there a close method on the current released alpha.9-3?
As I see here:

There's no close method but on the other hand things that are in comments marked as todo (like close on esc etc) works.

jelbourn commented Oct 7, 2016

Close is on the MdDialogRef that you get back from opening it.

@jelbourn jelbourn removed this from the alpha.7 milestone Oct 7, 2016
cpena commented Oct 17, 2016

Hi, When do you plan to release md-dialog in npm?

nkwood commented Oct 17, 2016

@cpena material2 is now found at @angular/material on npm. md-dialog is included in that package.

goelinsights commented Oct 17, 2016 edited

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

@cpena material2 is now found at @angular/material 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

fxck commented Oct 17, 2016

It's on alpha.9-3 now.

nkwood commented Oct 17, 2016

@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.

Ranguro commented Oct 19, 2016

What webpack version should I use to run this dialog in my project?

vapits commented Oct 19, 2016

@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 ;)

reinos commented Oct 21, 2016

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

Serjster commented Oct 21, 2016 edited

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 (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:

fxck commented Oct 22, 2016

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:

andvasp commented Oct 22, 2016

There is an example here in the demo-app in this repository.

vapits commented Oct 24, 2016

@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

@jelbourn jelbourn closed this Oct 27, 2016
nak411 commented Dec 16, 2016

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.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment