angular2 MdDialog is not appearing as a popup

Question

So I'm trying to use an MdDialog to display an error message. Unfortunately, it appears not as a popup, but as a block at the bottom of the page.

What do I need to look at or change to make this work correctly?

code below

common-modal.component.html

<h2 md-dialog-title>{{ title }}</h2>
<md-dialog-content>
    <p>{{ message }}</p>
</md-dialog-content>
<md-dialog-actions align="right">
    <button md-raised-button md-dialog-close>{{ closeText }}</button>
    <button md-raised-button *ngIf="enableNext" id="sm-next-button"
            (click)="dialogRef.close(true)">{{ nextText }}</button>
</md-dialog-actions>

common-modal.component.ts

import { Component }   from '@angular/core';
import { MdDialogRef } from "@angular/material";

@Component({
    selector: 'common-modal',
    templateUrl: 'common-modal.component.html',
    styleUrls: [ '../modal.component.scss']
})
export class CommonModalComponent {
    /**
     * The text for the header or title of the dialog.
     */
    title: string;
    /**
     * The text for the body or content of the dialog.
     */
    message: string;
    /**
     * The text of the close button. (No, Done, Cancel, etc)
     */
    closeText: string;
    /**
     * The text of the confirming button. (Yes, Next, etc)
     */
    nextText: string;
    /**
     * True to show the next button. False to hide it.
     */
    enableNext: boolean;

    constructor(public dialogRef: MdDialogRef<CommonModalComponent>) { }
}

error-modal.service.ts

import { Injectable }                            from "@angular/core";
import { MdDialog, MdDialogRef, MdDialogConfig } from "@angular/material";
import { Observable }                            from "rxjs";

import { CommonModalComponent }                  from "./common-modal/common-modal.component";
import { HIDE_NEXT_BUTTON }                      from "../constants";

@Injectable()
export class ErrorModalService
{
    constructor(private dialog: MdDialog) { }

    config = new MdDialogConfig();

    /**
     * Show the MdDialog as an alertDialog
     * @param title {string} The title text of the dialog
     * @param message {string} The message content text of the dialog
     * @param closeText {string} The text of the close button. (No, Done, Cancel, etc.) Default is OK
     * @return {Observable<any>} True will be returned if the next button is clicked. Nothing will be returned if canceled.
     */
    public show( title: string, message: string, closeText = "OK"): Observable<any> {

        let dialogRef: MdDialogRef<CommonModalComponent>;

        this.config.role = 'alertdialog';

        dialogRef = this.dialog.open(CommonModalComponent, this.config);

        dialogRef.componentInstance.title = title;
        dialogRef.componentInstance.message = message;
        dialogRef.componentInstance.closeText = closeText;
        dialogRef.componentInstance.nextText = '';
        dialogRef.componentInstance.enableNext = HIDE_NEXT_BUTTON;

        return dialogRef.afterClosed();
    }
}

login.component.ts

import { Component }            from '@angular/core'
import { Router }               from '@angular/router'
import { Response }             from '@angular/http'

import { LoginService }         from './login.service'
import { Login }                from './loginModel'
import { ErrorModalService }    from "../../shared/modal/error-modal.service";

@Component({
               selector: 'login',
               providers: [LoginService],
               templateUrl: 'login.component.html',
               styleUrls: ['login.component.scss']
           })
export class LoginComponent {

    loginModel: Login          = new Login('', '');
    protected userName: string = '';
    protected password: string = '';

    constructor(private router: Router,
                private loginService: LoginService,
                private errorModalService: ErrorModalService) { }

    private onSubmit() {
        this.loginService.login(this.loginModel)
            .subscribe(
                response => this.handleLoginCallback(response),
                error => {
                        this.errorModalService.config = {
                        height: "210px",
                        width: "200px",
                        position: {top: "0", left: "0"}
                    };
                    this.errorModalService.show(
                        "LOGIN ERROR",
                        "Incorrect username or password. Please try again."
                    );
                });
    }
}

score 10 · Accepted Answer · edited Mar 02 '17 at 16:00

10

It appears that material2 theming css also contains some functional css and without this overlay doesn't work properly. Material2 getting started guide mentions that theme is required. But its easy to miss this.

Try importing some material theme in styles.css

@import '~@angular/material/core/theming/prebuilt/deeppurple-amber.css';

or

@import "node_modules/@angular/material/core/theming/prebuilt/deeppurple-amber.css";

actual path can be different.

edited Mar 02 '17 at 16:00

Edric

24,639
13
81
91

answered Feb 22 '17 at 17:57

Olavi Vaino

422
5
10

Thanks! I'll check it out. I did finally get it working as a popover. But it fills the vertical space. It definitely needs some more css work. – Machtyn Feb 23 '17 at 22:19
What do you mean by "it fills the vertical space"? Dialog size should depend of the content. It's also possible to control dialog size using MdDialogConfig width and height. API documentation isn't very verbose but gives some hints https://material.angular.io/components/component/dialog – Olavi Vaino Feb 24 '17 at 17:01
There's some weird css going on with the dialog. But what I mean by "fills the vertical space" is that the dialog's width is, say about 300px, but its length is from the top of the browser window to the very bottom of the browser window, filled with white space below the button row. – Machtyn Feb 25 '17 at 17:23
In the dialog common-modal.component.html thers element that has no closing tag. Unlikely but possible that browser can't handle that properly and it cause size issue. – Olavi Vaino Feb 26 '17 at 21:09
Thanks ! I had the same problem. But I did the import... in the wrong file. Don't forget to add the import in the root style.css file ! – Adrien BARRAL Apr 01 '17 at 19:32

score 0 · Answer 2 · answered Feb 09 '18 at 12:13

0

I'm using angular 5.1.1, was facing this problem and I added indigo-pink.css to my style.css was able to pop up perfectly and make the dialog center

answered Feb 09 '18 at 12:13

GoodJeans

370
7
18

score 0 · Answer 3 · answered Jul 15 '20 at 06:38

0

This happened to me when I starting to use the Material module without initiating the installation phase, try to re-run

$ ng add @angular/material

this will initiate your project to configure with Material.

answered Jul 15 '20 at 06:38

sareno

576
8
10

angular2 MdDialog is not appearing as a popup

3 Answers3

Linked