Overview of IntegralUI Radio Button for Angular

Created: 18 Nov 2019

IntegralUI RadioButton is a native Angular component that represents a radio button. It replaces the standard HTML input element that acts like a radio button. In this article, you will find general information about the radio button component, including its properties, events and methods that you can use.

This demo displays three groups of radio buttons, with different appearance per group. Only one button in each group is checkable. When button becomes checked, its state is changed with small animation.

How to Use IntegralUI RadioButton in Angular

To use the RadioButton component you need to do the following:

• In app template place the radio group component as container using the iui-radiogroup tag name
• Using the iui-radiobutton tag name, place a radio button inside the group
• Set a unique value to each radio button
• To pre-select a button, apply its value to the parent group
• Handle the component events in your code

Radio button component must exist inside a radio group, so that only one button per group is checked. Whenever a button is clicked, it will become checked and all other buttons in the same group will be unchecked.

• Angular
• HTML

public groupVal: string;

ngOnInit(){
    this.groupVal = 'btn2';
}
                            

<iui-radio-group [(ngModel)]="groupVal">
    <iui-radio-button [allowAnimation]="true" [value]="'btn1'" (checkedChanged)="onRadioChanged($event)">Radio 1</iui-radio-button>
    <iui-radio-button [allowAnimation]="true" [value]="'btn2'" (checkedChanged)="onRadioChanged($event)">Radio 2</iui-radio-button>
    <iui-radio-button [allowAnimation]="true" [value]="'btn3'" (checkedChanged)="onRadioChanged($event)">Radio 3</iui-radio-button>
</iui-radio-group>
                            

In this code, the second radio button is pre-selected from code during initialization. The groupVal object is set to the value of 'Radio 2' button, this checks the radio button on page load. If groupVal object is not set, all radio buttons that belong to the group will initially appear as unchecked.

Radio Button in Other Angular Components

RadioButton component is also usable as part of other components. For example, you can add a radio button inside the TreeView component, where some items will have radio buttons as children. Simply, place the radio button in the item template, and when tree view updates it will show the button inside the specified item.

You can also use the radio button component in Angular Forms.

Properties, Events and Methods in IntegralUI RadioButton

Supported Properties

You can use the following properties to change the appearance and behavior of the RadioButton component:

• allowAnimation - determines whether changes to the button are animated or not
• checked - specifies whether the Radio Button is checked or not: true or false
• controlStyle - specifies an object that contains all style settings for the component
• data - specifies an object that holds data related to the component
• enabled - determines whether the component is enabled or disabled
• name - uniquely identifies the component
• size - specifies the component width and height
• state - specifies the component state: disabled, hovered, etc.
• value - holds the current progress value

Using these properties, you can customize the appearance and behavior of Radio Button component in your application.

Supported Events

Here is a list of available events:

• checkedChanged - occurs when checked property value changes
• enabledChanged - occurs when component is enabled or disabled
• stateChanged - occurs when component state changed: disabled, normal, hovered, selected
• valueChanged - occurs when component value changes

Whenever a radio button is checked, the checkedChanged event is fired. You can apply this event to all buttons in the same radio group. The event data contains the value of currently checked button. Depending on this value, you can proceed with adding a custom action in your code:

• Angular
• HTML

onRadioChanged(e: any){
    if (e.checked)
        console.log("The selected radio button is: ", e.value);
}
                            

<iui-radio-group [(ngModel)]="groupVal">
    <iui-radio-button [allowAnimation]="true" [value]="'btn1'" (checkedChanged)="onRadioChanged($event)">Radio 1</iui-radio-button>
    <iui-radio-button [allowAnimation]="true" [value]="'btn2'" (checkedChanged)="onRadioChanged($event)">Radio 2</iui-radio-button>
    <iui-radio-button [allowAnimation]="true" [value]="'btn3'" (checkedChanged)="onRadioChanged($event)">Radio 3</iui-radio-button>
</iui-radio-group>
                            

The checkedChanged event will fire twice, once for previously checked button (which now becomes unchecked) and once again for the currently selected radio button. To determine which button is currently checked, use the checked field from the event data.

Supported Methods

The following public methods are available:

• updateLayout - updates the component layout

How to Customize the Radio Button Appearance

The appearance of the radio button is determined by the default built-in CSS classes and currently selected theme. You can further modify its appearance, by creating your own CSS classes and applying their names to the controlStyle property.

buttonStyle = {
    general: {
        disabled: 'iui-radio-button-disabled',
        focused: 'iui-radio-button-focused',
        normal: 'iui-radio-button',
        hovered: 'iui-radio-button-hovered',
        selected: 'iui-radio-button-selected'
    },
    button: {
        general: 'iui-radio-button-btn',
        disabled: 'iui-radio-button-btn-disabled',
        checked: 'iui-radio-button-btn-checked',
        indeterminate: 'iui-radio-button-btn-indeterminate',
        unchecked: 'iui-radio-button-btn-unchecked'
    },
    content: {
        disabled: 'iui-radio-button-content-disabled',
        focused: 'iui-radio-button-content-focused',
        normal: 'iui-radio-button-content',
        hovered: 'iui-radio-button-content-hovered',
        selected: 'iui-radio-button-content-selected'
    }
}
                    

The controlStyle property accepts an object that contains the names of the CSS classes used to override the default button appearance. You only need to provide a class name for the button state you want to change. There are five button states: disabled, focused, hovered, normal and selected. In addition, there are four CSS classes that determine the check box appearance (depending on the state): checked, disabled, general and unchecked.

• Angular
• HTML
• CSS

public ctrlStyle2: any = {
    button: { 
        checked: 'rbtn2-ovw-btn-checked',
        unchecked: 'rbtn2-ovw-btn-unchecked'
    }
}
                            

<iui-radio-button [allowAnimation]="true" [controlStyle]="ctrlStyle2" [value]="'btn4'">Radio 4</iui-radio-button>
                            

/* RadioButton 2 */
.rbtn2-ovw-btn-checked span
{
    background-image: url(src/app/resources/radiobutton/radio-checked-1.png);
}
.rbtn2-ovw-btn-unchecked span
{
    background-image: url(src/app/resources/radiobutton/radio-unchecked-1.png);
}
                            

In this example, only the checked and unchecked states are overridden with custom CSS classes. Each radio group can have a different image for checked and unchecked state for its buttons.

Finally, if you want to disable animations of the checked state, you can set the allowAnimation property to false or remove it from component settings in HTML.

Conclusion

IntegralUI RadioButton component for Angular replaces the standard input element that acts like a radio button. Using different properties and events and your own CSS classes, you can customize the button appearance and behavior. Only one button can appear as checked within the group to which it belongs. The button is also compatible with Angular Forms and can be used as part of it.

The RadioButton component is part of IntegralUI Web.