How to use radio buttons in Angular

Key takeaways:

  • Radio buttons in Angular provide a simple yet effective way for users to select a single option from a predefined set of choices.

  • The HTML structure for radio buttons is straightforward, using the input type “radio” within label elements for better accessibility.

  • Angular’s two-way data binding allows for easy tracking of selected radio button values using the [(ngModel)] directive.

  • The (change) event listener enables dynamic updates to component properties based on user selection.

  • Proper integration of the radio button component into the main application is crucial for functionality.

  • Testing the implementation using Angular’s development server ensures that the radio buttons work as expected in the application context.

Radio buttons serve as essential user interface elements, enabling users to select a single option from a predetermined set of choices. In Angular, integrating radio buttons into web applications is a straightforward process that enhances user interactivity.

Prerequisites

Before proceeding, ensure that you have the following prerequisites installed:

  • npm or yarn

  • Angular CLI

If you don't have the prerequisites installed, you can refer to this tutorial: How to install Angular on Ubuntu.

Step 1: Setting up the project

Create a new Angular project by executing the following command.

ng new radio-button-demo

After the project is created, navigate to the project directory by entering the following command in the command line interface.

cd radio-button-demo

Step 2: Creating a component

Generate a new component using the following command.

ng generate component radio-buttons

This command generates the necessary files and creates a new component named radio-buttons.

Step 3: Implementing radio buttons

Next, we will open the radio-buttons.component.html file and write HTML to create radio buttons. The following example creates three radio buttons, each representing a distinct color option.

<div>
    <label>
      <input type="radio" name="color" value="red"> Red
    </label>
    <label>
      <input type="radio" name="color" value="blue"> Blue
    </label>
    <label>
      <input type="radio" name="color" value="green"> Green
    </label>
</div>

Step 4: Monitoring radio button selection

Now, we’ll add monitoring of radio button selection by keeping track of which radio button is selected.

Modify the TypeScript file

Open the component class file radio-buttons.component.ts. Add the selectedColor variable to keep track of the radio button selection. Modify the code as follows:

import { Component } from '@angular/core';
@Component({
  selector: 'app-radio-buttons',
  templateUrl: './radio-buttons.component.html',
  styleUrls: ['./radio-buttons.component.css']
})
export class RadioButtonsComponent {
  selectedColor: string='NOTHING';
}

In the code above, we define the selectedColor variable as a string. This variable stores the value of the selected color from the radio buttons. In this example, we initially initialized it to 'NOTHING'.

Modify the HTML file

Now, modify the radio-buttons.component.html file. We will introduce the (change) event listener to each radio button.

The (change) listener triggers when the user changes the selected option by clicking on a different radio button.

Within the (change) event listener, we execute JavaScript expressions based on the selected option. For instance, if the user selects the “red” radio button, the expression "selectedColor = 'red'" is executed. This assigns the value “red” to the selectedColor variable.

<div>
    <label>
      <input type="radio" name="color" value="red" (change)="selectedColor = 'red'"> Red
    </label>
    <label>
      <input type="radio" name="color" value="blue" (change)="selectedColor = 'blue'"> Blue
    </label>
    <label>
      <input type="radio" name="color" value="green" (change)="selectedColor = 'green'"> Green
    </label>
    <p>You selected: {{ selectedColor }}</p> 
</div>

In the above example, we also incorporated the selectedColor variable into the HTML using double curly braces {{ }}. This approach allows us to dynamically update the displayed text within the <p> element. For example, if the user selects “red,” the text “You selected: red” will be displayed.

Step 5: Adding component to the app

To include the radio-buttons component within the app, open the HTML file of that component. Next, add a radio button selector tag where you need to add radio buttons. For example, we can add the following to the app.component.html file.

<app-radio-buttons></app-radio-buttons>

Step 6: Running the application

To observe the radio buttons in action, you can run the Angular development server by executing the following command:

ng serve

Here is an example application that displays radio buttons in Angular and tracks the selected radio button.

<h1>Radio Buttons App</h1>

<app-radio-buttons></app-radio-buttons>
An example of using radio buttons in Angular

Conclusion

Implementing radio buttons in Angular applications is a straightforward process that significantly enhances user interaction and data collection. By following the steps outlined above, we can easily integrate and customize radio buttons to suit specific needs. The combination of Angular’s powerful framework and the versatility of radio buttons creates an efficient and user-friendly way to capture user preferences in web applications.

Frequently asked questions

Haven’t found what you were looking for? Contact Us

How to apply the radio button in Angular

To apply radio buttons in Angular, start by creating a component using Angular CLI. In the component’s HTML template, use <input type="radio"> elements wrapped in <label> tags for each option. Implement two-way data binding with [(ngModel)] to track selections. Finally, use (change) event binding to trigger actions when a radio button is selected. This approach utilizes Angular’s powerful form controls and event-handling capabilities for the seamless integration of radio buttons in the web application.

How to use the radio button in TypeScript

In TypeScript-based Angular applications, radio buttons are implemented using a combination of HTML and TypeScript. Define a property in the component class to store the selected value. Use [(ngModel)] for two-way data binding between the radio buttons and this property. Implement methods in the TypeScript file to handle radio button changes or perform actions based on selections. This TypeScript-driven approach enhances type safety and enables robust form handling in Angular projects.

How to enable the radio button by default in Angular

To enable a radio button by default in Angular, set the initial value of the bound property to match the desired radio button’s value. In the component’s TypeScript file, initialize the property in the ngOnInit() life cycle hook or in the constructor. Alternatively, use the checked attribute in the HTML for the desired radio button. This ensures that when the Angular application loads, the specified radio button is pre-selected, improving user experience in the web forms.

How to get selected radio button value in Angular material

To retrieve the selected radio button value in Angular Material, use the mat-radio-group component with a [(ngModel)] binding. Access the selected value through the bound property in the TypeScript code. Implement the (change) event on the mat-radio-group to trigger a method when the selection changes. This method can then use the updated model value for further processing or data manipulation, using Angular Material’s robust form controls for enhanced UI consistency and accessibility in the web application.

Free AI Mock Interviews
Coding Interview
Coding PatternsFree Interview
Gain insights and practical experience with coding patterns through targeted MCQs and coding problems, designed to match and challenge your expertise level.
System Design
You TubeFree Interview
Learn to design a video streaming platform like YouTube by tackling functional and non-functional requirements, core components, and high-level to detailed design challenges.

Free Resources

Copyright ©2025 Educative, Inc. All rights reserved