File

src/module/components/dialogs/mat-radio-dialog/mat-radio-dialog.component.ts

Implements

OnInit

Metadata

selector mat-radio-dialog
styleUrls ./mat-radio-dialog.component.scss
templateUrl ./mat-radio-dialog.component.html

Index

Properties
Methods

Constructor

constructor(dialogRef: MatDialogRef, data: MatRadioDialogData)
Parameters :
Name Type Optional
dialogRef MatDialogRef<MatRadioDialog> No
data MatRadioDialogData No

Methods

ngOnInit
ngOnInit()
Returns : void

Properties

color
Type : ThemePalette
Public data
Type : MatRadioDialogData
Decorators :
@Optional()
@Inject(MAT_DIALOG_DATA)
Public dialogRef
Type : MatDialogRef<MatRadioDialog>
icon
Type : string
options
Type : literal type[]
textButton
Type : string
title
Type : string
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>

./mat-radio-dialog.component.scss

.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
Component
Html element with directive

result-matching ""

    No results matching ""