Angular RadioGroup - Customize Item Appearance

For a minor customization of RadioGroup items, you can define specific fields in item data objects. For example, the following code generates three radio buttons: the first is disabled, the second is not customized, the third is hidden.

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

If you need a more flexible solution, define an itemTemplate.

HTML
TypeScript
  • <dx-radio-group
  • [dataSource]="dataSource"
  • itemTemplate="radio">
  • <div class="radio" *dxTemplate="let data of 'radio'">
  • <p style="font-size:larger"><b>{{data}}</b></p>
  • </div>
  • </dx-radio-group>
  • import { DxRadioGroupModule } from "devextreme-angular";
  • // ...
  • export class AppComponent {
  • dataSource = ["Low", "Normal", "Urgent", "High"]
  • }
  • @NgModule({
  • imports: [
  • // ...
  • DxRadioGroupModule
  • ],
  • // ...
  • })
See Also