CODEWITHSUNDEEP
angularangular-material2
Machtyn
Machtyn

Reputation: 3272

angular2 MdDialog is not appearing as a popup

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

Upvotes: 6

Views: 4199

Answers (3)

sareno
sareno

Reputation: 696

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.

Upvotes: 0

GoodJeans
GoodJeans

Reputation: 380

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

Upvotes: 0

Olavi Vaino
Olavi Vaino

Reputation: 451

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.

Upvotes: 10

Related Questions