Radio Button

The Ignite UI for Angular Radio Button component renders a set of radio buttons to allow the user make a choice and submit data. The user is able to select just one from the available options.

Radio Button Demo

Usage

A number of options, attributes and events are available to customize the component look and feel and the way the radio button is working.

<igx-radio
    *ngFor="let item of ['Foo', 'Bar', 'Baz']"
    value="{{item}}"
    name="group"
    [(ngModel)]="user.favouriteVarName">
    {{item}}
</igx-radio>

The above markup will render three radio buttons, one for each item of the ['Foo', 'Bar', 'Baz'] array. The 'value' property is mapped to the input element value attribute, while the content of the tag is what gets displayed in the label associated with the input.

Properties

You can assign unique IDs by using the id property and use the name property to group buttons together.

The rest of the properties are also standard and control the tabIndex, disabled and checked attributes of the input element that gets rendered:

<igx-radio
    id="{{user.id}}"
    value="{{user.manHours}}"
    [tabIndex]="50"
    [disabled]="false"
    [checked]="false"
    [(ngModel)]="user.favouriteVarName">
    {{item}}
</igx-radio>

Events

You can attach to a change event using (onchange)="doAlert($event)":

<igx-radio
    value="{{user.id}}"
    tabIndex="50"
    (change)="doAlert($event)"
    (focus)="doAlert($event)"
    (blur)="doAlert($event)"
    [(ngModel)]="user.favouriteVarName">
    {{user.name}}
</igx-radio>
import { Component } from "@angular/core";
import { IgxRadioModule } from "../../src/radio/radio";

@Component({
    selector: "radio-button",
    templateUrl: "radio-button.html"
})
export class RadioSampleComponent {
    user = {
        name: 'John Doe',
        favouriteVarName: 'Foo',
        id: 12,
    };

    doAlert() {
        alert("Thank you for selecting this option ! !");
    }
}