Radio & Radio Group
The Ignite UI for Angular Radio Button component allows the user to select a single option from an available set of options that are listed side by side.
Radio Button
Radio Button Demo
Radio Button Usage
At its core the radio button component allows for a single option selection. The default styling is done according to the selection controls specification as per the Material Design guidelines.
To get started with the Ignite UI for Angular Radio, let's first import the IgxRadioModule in the app.module.ts file:
// app.module.ts
...
import { IgxRadioModule } from 'igniteui-angular';
@NgModule({
...
imports: [..., IgxRadioModule],
...
})
export class AppModule {
public selected: any;
}
To get a started with some radio buttons, add the following code inside the component template:
<igx-radio [(ngModel)]="selected" value="option1">Option 1</igx-radio>
<igx-radio [(ngModel)]="selected" value="option2">Option 2</igx-radio>
If all went well, you should see something like the following in the browser:
Radio Button Properties
Radio buttons are only useful when added in a group. Let's enhance the code above by adding four radio buttons, each responsible for applying a certain color as a background. We will bind the backgroundColor property of a div element to the component's selectedColor property. You will notice that selectedColor also participates in a two way binding relation through the NgModel directive, therefore its value is updated each time the user selects a different radio button(color).
// radiogroup.component.ts
...
public title = "Select Background";
public colors = [{
hex: "#f06a2f",
name: "Carrot"
}, {
hex: "#ff134a",
name: "Watermelon"
}, {
hex: "#7bc96f",
name: "Grass"
},
{
hex: "transparent",
name: "No color"
}];
public selectedColor: string = this.colors[3].hex;
<!--radiogroup.component.html-->
<igx-radio *ngFor="let color of colors"
name="color"
[value]="color.hex"
[(ngModel)]="selectedColor">
{{color.name}}
</igx-radio>
<div class="box" [style.background-color]="selectedColor"></div>
Pay attention that before using the ngModel directive in a two-way data binding, you must import the FormsModule and add it to the NgModule's imports list.
Try it! The final result would be something like that:
Radio Group
The Ignite UI for Angular Radio Group directive provides a grouping container that allows better control over the child igxRadio components and supports template-driven and reactive forms.
Radio Group Demo
Radio Group Usage
The Radio Group Directive is exported as an NgModule, thus all you need to do in your application is to import the IgxRadioModule in the app.module.ts file:
// app.module.ts
...
import { IgxRadioModule } from 'igniteui-angular';
@NgModule({
...
imports: [..., IgxRadioModule],
...
})
To get a started, create an igxRadioGroup and add several igxRadio components.
Note that, setting the igx-radio-group name property is mandatory.
<!--radio-group.component.html-->
<igx-radio-group name="fruitsRadioGroup">
<igx-radio class="radio-sample" *ngFor="let fruit of fruits" value="{{fruit}}">
{{fruit}}
</igx-radio>
</igx-radio-group>
// radio-group.component.ts
public fruits = ["Apple", "Mango", "Banana", "Orange"];
API References
Additional Resources
Our community is active and always welcoming to new ideas.
GitHub