Angular Radio & Radio Group Component Overview
Radio Button
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.
Angular Radio & Radio Group Example
Getting Started with Ignite UI for Angular Radio Button
To get started with the Ignite UI for Angular Radio Button component, first you need to install Ignite UI for Angular. In an existing Angular application, type the following command:
ng add igniteui-angular
For a complete introduction to the Ignite UI for Angular, read the getting started topic.
The next step is to import the IgxRadioModule
in the app.module.ts file.
// app.module.ts
...
import { IgxRadioModule } from 'igniteui-angular';
// import { IgxRadioModule } from '@infragistics/igniteui-angular'; for licensed package
@NgModule({
...
imports: [..., IgxRadioModule],
...
})
export class AppModule {
public selected: any;
}
Alternatively, as of 16.0.0
you can import the IgxRadioGroupDirective
and IgxRadioComponent
as standalone dependencies, or use the IGX_RADIO_GROUP_DIRECTIVES
token to import the component and all of its supporting components and directives.
// home.component.ts
import { FormsModule } from '@angular/forms';
import { IGX_RADIO_GROUP_DIRECTIVES } from 'igniteui-angular';
// import { IGX_RADIO_GROUP_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package
@Component({
selector: 'app-home',
template: `
<igx-radio-group>
<igx-radio [(ngModel)]="selected" value="London">London</igx-radio>
<igx-radio [(ngModel)]="selected" value="New York">New York</igx-radio>
<igx-radio [(ngModel)]="selected" value="Tokyo">Tokyo</igx-radio>
<igx-radio [(ngModel)]="selected" value="Sofia">Sofia</igx-radio>
</igx-radio-group>
`,
styleUrls: ['home.component.scss'],
standalone: true,
imports: [IGX_RADIO_GROUP_DIRECTIVES, FormsModule]
/* or imports: [IgxRadioComponent, IgxRadioGroupDirective, FormsModule] */
})
export class HomeComponent {
public selected: any;
}
Now that you have the Ignite UI for Angular Radio Button module or directives imported, you can start using the igx-radio-group
directive and igx-radio
component.
Using the Angular Radio Button
Radio buttons can be displayed using 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>
Label
The labelPosition
property can be used to change the default position of the label in the radio component. Users can choose between before
and after
. If not specified, the label will be placed after the radio button.
<igx-radio [(ngModel)]="selected" value="option1" labelPosition="before">Option 1</igx-radio>
<igx-radio [(ngModel)]="selected" value="option2" labelPosition="before">Option 2</igx-radio>
Properties
Let's enhance the previous sample 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 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 [style.background-color]="selectedColor">
...
</div>
Pay attention that if you don't use the NgModel
directive in a two-way data binding, you must import the FormsModule
and add it to the NgModule's imports list.
The final result would be something like that:
Styling
To get started with styling the radio buttons, we need to import the index
file, where all the theme functions and component mixins live:
@use "igniteui-angular/theming" as *;
// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';
Following the simplest approach, we create a new theme that extends the radio-theme
and accepts some of the default theme's parameters:
$custom-radio-theme: radio-theme(
$disabled-color: lightgray,
$empty-color: #345779,
$fill-color: #2dabe8,
$fill-color-hover: #2dabe8,
$fill-hover-border-color: #2dabe8
);
Using CSS variables
The last step is to pass the custom radio theme in our application:
@include css-vars($custom-radio-theme);
Using Theme Overrides
In order to style components for older browsers, like Internet Explorer 11, we have to use a different approach, since it doesn't support CSS variables.
If the component is using the Emulated
ViewEncapsulation, it is necessary to penetrate
this encapsulation using ::ng-deep
. To prevent the custom theme to leak into other components, be sure to include the :host
selector before ::ng-deep
:
:host {
::ng-deep {
@include radio($custom-radio-theme);
}
}
Radio Group
The Ignite UI for Angular Radio Group directive provides a grouping container that allows better control over the child radio components and supports template-driven and reactive forms.
Demo
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';
// import { IgxRadioModule } from '@infragistics/igniteui-angular'; for licensed package
@NgModule({
...
imports: [..., IgxRadioModule],
...
})
To get started, create an igxRadioGroup
and add several igxRadio
components.
Note that, setting a name
property for the radio group is mandatory.
<!--radio-group.component.html-->
<igx-radio-group name="fruitsRadioGroup">
<igx-radio *ngFor="let fruit of fruits" value="{{fruit}}">
{{fruit}}
</igx-radio>
</igx-radio-group>
// radio-group.component.ts
public fruits = ["Apple", "Mango", "Banana", "Orange"];
Alignment
Use the alignment
input property to change the orientation of the igxRadio
components in the radio group. Users can choose between horizontal
and vertical
. By default the radio group alignment is horizontal.
//sample.component.ts
import { RadioGroupAlignment } from "igniteui-angular";
...
public alignment = RadioGroupAlignment.vertical;
...
<!-- sample.component.html -->
<igx-radio-group [alignment]="alignment">
<igx-radio [(ngModel)]="selected" value="London">London</igx-radio>
<igx-radio [(ngModel)]="selected" value="New York">New York</igx-radio>
<igx-radio [(ngModel)]="selected" value="Tokyo">Tokyo</igx-radio>
<igx-radio [(ngModel)]="selected" value="Sofia">Sofia</igx-radio>
</igx-radio-group>
API References
Theming Dependencies
Additional Resources
Our community is active and always welcoming to new ideas.