So, I'm trying to use MdDialog to display an error message. Unfortunately, this does not look like a pop-up window, but like a block at the bottom of the page.
What do I need to see or change to make this work right?
code below
general 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>
general-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>) { }
}
<strong> 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."
);
});
}
}