DevExtreme Angular - Overview

The RadioGroup is a widget that contains a set of radio buttons and allows an end user to make a single selection from the set.

View Demo

The following code adds a simple RadioGroup to your page. Here, the value option specifies the initially selected radio button.

HTML
TypeScript
  • <dx-radio-group
  • [dataSource]="dataSource"
  • value="Low">
  • </dx-radio-group>
  • import { DxRadioGroupModule } from "devextreme-angular";
  • // ...
  • export class AppComponent {
  • dataSource = ["Low", "Normal", "Urgent", "High"]
  • }
  • @NgModule({
  • imports: [
  • // ...
  • DxRadioGroupModule
  • ],
  • // ...
  • })

If your data is an array of objects, bind it to the RadioGroup using the displayExpr and valueExpr options. displayExpr specifies which data source field provides texts for buttons; valueExpr specifies which data source field provides values to be written to the value option when a button is selected. Leave valueExpr unspecified if you need the entire data object to be written to the value option.

HTML
TypeScript
  • <dx-radio-group
  • [dataSource]="dataItems"
  • [value]="radioGroupValue"
  • displayExpr="text">
  • </dx-radio-group>
  • import { DxRadioGroupModule } from "devextreme-angular";
  • // ...
  • export class AppComponent {
  • dataItems = [
  • { text: "Low", color: "grey" },
  • { text: "Normal", color: "green" },
  • { text: "Urgent", color: "yellow" },
  • { text: "High", color: "red" }
  • ];
  • radioGroupValue = dataItems[1];
  • }
  • @NgModule({
  • imports: [
  • // ...
  • DxRadioGroupModule
  • ],
  • // ...
  • })

The RadioGroup widget supports horizontal (default for tablets) and vertical (default for other devices) layouts. To change the layout for all types of devices, specify the layout option.

HTML
TypeScript
  • <dx-radio-group
  • [dataSource]="dataSource"
  • layout="horizontal">
  • </dx-radio-group>
  • import { DxRadioGroupModule } from "devextreme-angular";
  • // ...
  • export class AppComponent {
  • dataSource = ["Low", "Normal", "Urgent", "High"]
  • }
  • @NgModule({
  • imports: [
  • // ...
  • DxRadioGroupModule
  • ],
  • // ...
  • })
See Also