File
Implements
Metadata
selector |
mat-radio-dialog |
styleUrls |
./mat-radio-dialog.component.scss |
templateUrl |
./mat-radio-dialog.component.html |
color
|
Type : ThemePalette
|
|
options
|
Type : literal type[]
|
|
import {Component, Inject, OnInit, Optional} from '@angular/core';
import {MAT_DIALOG_DATA, MatDialogRef, ThemePalette} from '@angular/material';
export interface MatRadioDialogData {
title?: string;
icon?: string;
color?: ThemePalette;
textButton?: string;
options: { value: any; viewValue?: string }[];
}
@Component({
selector: 'mat-radio-dialog',
templateUrl: './mat-radio-dialog.component.html',
styleUrls: ['./mat-radio-dialog.component.scss']
})
export class MatRadioDialog implements OnInit {
title: string;
icon: string;
color: ThemePalette;
textButton: string;
options: { value: any; viewValue?: string }[];
constructor(public dialogRef: MatDialogRef<MatRadioDialog>,
@Optional() @Inject(MAT_DIALOG_DATA) public data: MatRadioDialogData) {
}
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-radio-group #radioGroup>
<mat-radio-button *ngFor="let option of options" name="more_options"
[value]="option.value">
{{option.viewValue ? option.viewValue : option.value}}
</mat-radio-button>
</mat-radio-group>
</div>
</mat-dialog-content>
<mat-dialog-actions fxLayoutAlign="center center">
<button mat-raised-button
(click)="dialogRef.close(radioGroup.selected.value)"
[color]="color">
{{textButton}}
</button>
</mat-dialog-actions>
.title {
font-size: 20px;
margin-top: 16px;
margin-bottom: 16px;
}
mat-radio-group {
display: flex;
flex-direction: column;
margin: 15px 0;
}
mat-radio-button {
margin: 5px;
}
Legend
Html element with directive