ng add igniteui-angular

For a complete introduction to the Ignite UI for Angular, read thegetting started topic.

The next step is to import theIgxRadioModule in theapp.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 of16.0.0 you can import theIgxRadioGroupDirective andIgxRadioComponent as standalone dependencies, or use theIGX_RADIO_GROUP_DIRECTIVES token to import the component and all of its supporting components and directives.

// home.component.tsimport { 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 theigx-radio-group directive andigx-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

ThelabelPosition property can be used to change the default position of the label in the radio component. Users can choose betweenbefore andafter. 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 theNgModel 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 theNgModel directive in a two-way data binding, you must import theFormsModule and add it to the NgModule's imports list.

The final result would be something like that:

Styling

Following the simplest approach, you can use CSS variables to customize the appearance of the radio button:

igx-radio {    --empty-color: #556b81;    --label-color: #131e29;    --fill-color: #0064d9;    --focus-outline-color: #0032a5;}igx-radio:hover {    --empty-fill-color: #e3f0ff;    --empty-color: #0064d9;    --hover-color: transparent;}

By changing the values of these CSS variables, you can alter the entire look of the component.

Another way to style the radio button is by usingSass, along with ourradio-theme function.

To start styling the radio button usingSass, first import theindex file, which includes all theme functions and component mixins:

@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 theradio-theme. By providing just two key parameters —$empty-color and$fill-color — you can generate a fully styled radio button. These values serve as the foundation for the theme, by providing them it will automatically compute all the required foreground and background colors for various states (e.g., hover, selected, disabled).

$custom-radio-theme: radio-theme(    $empty-color:  #345779,    $fill-color: #2dabe8,);

Finally,include the custom theme in your application:

@include css-vars($custom-radio-theme);

In the sample below, you can see how using the radio button with customized CSS variables allows you to create a design that visually resembles the radio button used in theSAP UI5 design system.

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 anNgModule, thus all you need to do in your application is to import theIgxRadioModule in theapp.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 anigxRadioGroup and add severaligxRadio components.

Note that, setting aname property for the radio group ismandatory.

<!--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.tspublic fruits = ["Apple", "Mango", "Banana", "Orange"];

Alignment

Use thealignment input property to change the orientation of theigxRadio components in the radio group. Users can choose betweenhorizontal andvertical. By default the radio group alignment is horizontal.

//sample.component.tsimport { 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

• IgxRadioGroupDirective
• IgxRadioComponent
• IgxRadioComponent Styles

Theming Dependencies

• IgxRipple Theme

Additional Resources

Our community is active and always welcoming to new ideas.

• Ignite UI for AngularForums
• Ignite UI for AngularGitHub