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.
The following code adds a simple RadioGroup to your page. Here, the value option specifies the initially selected radio button.
- <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.
- <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.
- <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
If you have technical questions, please create a support ticket in the DevExpress Support Center.