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."
                    );
                });
    }
}

Answer 1

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.