File
Implements
Metadata
selector |
mat-alert-dialog |
styleUrls |
./mat-alert-dialog.component.scss |
templateUrl |
./mat-alert-dialog.component.html |
import {Component, Inject, OnInit, Optional} from '@angular/core';
import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material';
export type AlertType = 'primary' | 'accent' | 'warn';
export interface MatAlertDialogData {
title?: string;
icon?: string;
type?: string;
message: string;
okTextButton?: string;
}
@Component({
selector: 'mat-alert-dialog',
templateUrl: './mat-alert-dialog.component.html',
styleUrls: ['./mat-alert-dialog.component.scss']
})
export class MatAlertDialog implements OnInit {
title: string;
icon: string;
type: string;
message: string;
okTextButton: string;
constructor(public dialogRef: MatDialogRef<MatAlertDialog>,
@Optional() @Inject(MAT_DIALOG_DATA) public data: MatAlertDialogData) {
}
ngOnInit() {
if (this.data) {
this.title = this.data.title ? this.data.title : 'Alert';
this.icon = this.data.icon ? this.data.icon : 'warning';
this.type = this.data.type ? this.data.type : 'warn';
this.message = this.data.message ? this.data.message : 'Cancel';
this.okTextButton = this.data.okTextButton ? this.data.okTextButton : 'Ok';
}
}
}
<mat-dialog-content fxLayout="column" fxLayoutAlign="center center">
<mat-icon [color]="type">{{icon}}</mat-icon>
<div class="title">
{{title}}
</div>
<div class="subtitle">
<p>{{message}}</p>
</div>
</mat-dialog-content>
<mat-dialog-actions fxLayoutAlign="center center">
<button mat-raised-button
matDialogClose
[color]="type">
{{okTextButton}}
</button>
</mat-dialog-actions>
.material-icons {
font-size: 4rem;
}
.mat-icon {
height: 4rem;
width: 4rem;
//color: rgba(0, 0, 0, .54);
}
.title {
font-size: 20px;
margin-top: 16px;
}
.subtitle{
margin: 16px auto;
max-width: 300px;
color: rgba(0,0,0,.54);
font-size: 15px;
text-align: center;
p {
display: block;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
}
}
Legend
Html element with directive