Angular material radio button

Updated March 30, 2023

Introduction to Angular material radio button

Angular material provides us radio button with styling and animations, and it works the same as the input type radio we have in HTML. But material provides us more attractive and user-friendly radio button. We can use the radio button if we have to allow users to choose any one option from the given list of items. Then we can go for the radio button. To enable and make use of the material radio button, we require to make few configurations in the code and import the necessary packages to use it in the existing angular application. In the coming section of the tutorial, we will see how to implement the radio button using the material library and its configurations, properties in detail for better understanding.

Syntax

In this section, we will have a closer look at the syntax to use the radio button in our application; by using it, we will have default styling, design and animation in place, which can be changed; let’s get started see below;

<mat-radio-button value="value">label of radio button</mat-radio-button>

As you can see, we are making use of the ‘mat-radio-button’ selector to display our radio button using the material library, but this can’t be use directed on the HTML or template; we will see the full configurations in the coming section of the tutorial, let’s take a practice syntax;

e.g.:

<mat-radio-button value="A">Choose me !!</mat-radio-button>

How radio button work in Angular material?

As we know, that radio button is used when we have to select only one option from the given list of inputs. The material provides us with an in-built module that helps us render the radio button on UI with default styling and animations, making them more attractive and user-friendly. Material radio buttons also provide use the same feature and functionality as input type radio. Let’s take a closer look at the configuration to use this inside the application;

1) MatRadioModule: This module contains the radio button. It has to be impetrated inside the application, either in the root module or any child modules you want to use it. For reference, please find the below code to import this module properly see below;

e.g. :

import {MatRadioModule} from '@angular/material/radio';

2) mat-radio-group: This is a selector used to represent the group of radio buttons; inside this, we can define single radio or more buttons simultaneously. Below see syntax:

e.g. :

<mat-radio-group aria-label="Label>
<mat-radio-button value="A">One</mat-radio-button>
<mat-radio-button value="B>Two</mat-radio-button>
<mat-radio-button value="C>Three</mat-radio-button>
</mat-radio-group>

3) mat-radio-button: This selector allows us to define our radio button with value and the label specified as the attribute for it, without we cannot see a radio button on the screen with different property and methods.

Now let’s get started with the steps that need to be taken in order to step up our angular material project initially for beginners; see below;

1) First, install the Angular CLI, which enables us to download the required packages and library for our project. You can download it by typing the below command on your command make sure you have already installed node see below;

e.g. :

npm install -g @angular/cli)

The above command will install the CLI globally in our system; hence we can use it globally when required.

2) Now, in this step, we will try to create the new angular project from scratch; this project will not be a material project that we have to add later by installing the material dependency inside our project. So just execute the below command on your Command Prompt, and press enter see below;

e.g. :

ng new your project name
>> ng new my-first-project

This command will create the project with the name my-first-project; you can create your project with any name mentioned.

3) Just to make sure, try one command which is mentioned below to install all the required library into our project,

e.g. :

npm install

4) Now, you can test and run your project by typing the simple command which is mentioned below. This is just to ensure that we are on the right track and that our project has been created without any errors or bugs inside it.

e.g. :

ng serve

5) go on browser and try to run the application with the below URL :

e.g. :

http://localhps:4200

By default, the angular project run on the port 4200; you can change it as per your need if required.

6) Now everything is set, we have our angular project now we will add the material library to our project just by running the below command on the command prompt;

e.g. :

ng add @angular/material

Example of Angular material radio button

Below is the sample example to build a radio button using the material library in angular; just setup workspace and reuse the below code to understand it;

1) template or HTML code:

<h5><u><i>Radio Button demo using Angular Material !!</i></u></h5>
<label id="example-radio-group-label">Choose from the option::</label>
<mat-radio-group
aria-labelledby="example-radio-group-label"
class="example-radio-group"
[(ngModel)]="myvalue">
<mat-radio-button class="example-radio-button" *ngFor="let obj of myoptions" [value]="obj">
{{obj}}
</mat-radio-button>
</mat-radio-group>
<div>Valus choosen is : {{myvalue}}</div>

2) demo.radio.componenet.ts code (just create the file and copy the below line of code):

import {Component} from '@angular/core';
/**
* @title Demo radio in angular material
*/
@Component({
selector: 'demo-radio',
templateUrl: 'demo.radio.componenet..html',
styleUrls: ['demo.radio.componenet..css'],
})
export class DemoRadioMaterial {
myvalue: string ="NA";
myoptions: string[] = ['One', 'Two', 'Three', 'Four', 'Five',
'Six'];
}

3) index.html code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons&display=block" rel="stylesheet">
<title>Demo radio in angular material</title>
</head>
<body class="mat-app-background">
<demo-radio>Loading..</demo-radio>
<span class="version-info">Current build: 12.1.1</span>
</body>
</html>

4) module.ts code:

import {NgModule} from '@angular/core';
import {MatRadioModule} from '@angular/material/radio';
@NgModule({
exports: [
MatRadioModule,
]
})
export class DemoMaterialRadio {}

Output:

Conclusion

Radio buttons are very easy to use, implement and by the use of them, we can allow users to choose one from the given list of options. We can often find them on various and every website available. Moreover, the material makes them more easy to use and handle by adding a few imports to the existing application without installing anything.

Recommended Articles

1. Angular 7 Features
2. Angular 7 Form Validations
3. Installing Angular
4. How Angular Works