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
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.