File
Implements
Metadata
| selector |
mat-select-dialog |
| styleUrls |
./mat-select-dialog.component.scss |
| templateUrl |
./mat-select-dialog.component.html |
|
color
|
Type : ThemePalette
|
|
|
|
options
|
Type : literal type[]
|
|
|
|
Optional
textButton
|
Type : string
|
|
|
import {Component, Inject, OnInit, Optional} from '@angular/core';
import {MAT_DIALOG_DATA, MatDialogRef, ThemePalette} from '@angular/material';
export interface MatSelectDialogData {
title?: string;
icon?: string;
color?: ThemePalette;
textButton?: string;
options: { value: any; viewValue?: string }[];
}
@Component({
selector: 'mat-select-dialog',
templateUrl: './mat-select-dialog.component.html',
styleUrls: ['./mat-select-dialog.component.scss']
})
export class MatSelectDialog implements OnInit {
title: string;
icon: string;
color: ThemePalette;
textButton?: string;
options: { value: any; viewValue?: string }[];
constructor(public dialogRef: MatDialogRef<MatSelectDialog>,
@Optional() @Inject(MAT_DIALOG_DATA) public data: MatSelectDialogData) {
}
ngOnInit() {
if (this.data) {
this.title = this.data.title ? this.data.title : 'Options';
this.icon = this.data.icon ? this.data.icon : '';
this.color = this.data.color ? this.data.color : 'primary';
this.textButton = this.data.textButton ? this.data.textButton : 'OK';
this.options = this.data.options ? this.data.options : null;
}
}
}
<mat-dialog-content fxLayout="column">
<div class="title">
{{title}}
</div>
<div fxFlex fxLayout="row" fxLayoutAlign="center center">
<mat-form-field>
<mat-label>options</mat-label>
<mat-select #select>
<mat-option *ngFor="let option of options" [value]="option.value">
{{option.viewValue ? option.viewValue : option.value}}
</mat-option>
</mat-select>
</mat-form-field>
</div>
</mat-dialog-content>
<mat-dialog-actions fxLayoutAlign="center center">
<button mat-raised-button
(click)="dialogRef.close(select.selected.value)"
[color]="color">
{{textButton}}
</button>
</mat-dialog-actions>
.title {
font-size: 20px;
margin-top: 16px;
margin-bottom: 16px;
}
Legend
Html element with directive