File
Implements
Metadata
| selector |
mat-input-dialog |
| styleUrls |
./mat-input-dialog.component.scss |
| templateUrl |
./mat-input-dialog.component.html |
|
color
|
Type : ThemePalette
|
|
|
import {Component, Inject, OnInit, Optional} from '@angular/core';
import {MAT_DIALOG_DATA, MatDialogRef, ThemePalette} from '@angular/material';
export interface MatInputDialogData {
title?: string;
color?: ThemePalette;
icon?: string;
appearance?: string;
placeholder?: string;
textButton?: string;
}
@Component({
selector: 'mat-input-dialog',
templateUrl: './mat-input-dialog.component.html',
styleUrls: ['./mat-input-dialog.component.scss']
})
export class MatInputDialog implements OnInit {
title: string;
icon: string;
color: ThemePalette;
placeholder: string;
textButton: string;
constructor(public dialogRef: MatDialogRef<MatInputDialog>,
@Optional() @Inject(MAT_DIALOG_DATA) public data: MatInputDialogData) {
}
ngOnInit() {
if (this.data) {
this.title = this.data.title ? this.data.title : 'Enter the data';
this.icon = this.data.icon ? this.data.icon : 'edit';
this.color = this.data.color ? this.data.color : 'primary';
this.placeholder = this.data.placeholder ? this.data.placeholder : '';
this.textButton = this.data.textButton ? this.data.textButton : 'Ok';
}
}
}
<mat-dialog-content fxLayout="column">
<div class="title">
{{title}}
</div>
<div fxFlex fxLayout="row" fxLayoutAlign="center center">
<mat-form-field class="example-full-width">
<input matInput #input [placeholder]="placeholder">
<mat-icon matSuffix [color]="color">{{icon}}</mat-icon>
</mat-form-field>
</div>
</mat-dialog-content>
<mat-dialog-actions fxLayoutAlign="center center">
<button mat-raised-button
(click)="dialogRef.close(input.value)"
[color]="color">
{{textButton}}
</button>
</mat-dialog-actions>
.title {
font-size: 20px;
margin-top: 16px;
margin-bottom: 16px;
}
Legend
Html element with directive