Angular PrimeNG Form RadioButton Properties Component

Angular PrimeNG is a UI component library for Angular Applications. It offers many pre-built themes and UI components for a variety of tasks like inputs, menus, charts, Buttons, etc. This article will discuss the Angular PrimeNG Form RadioButton Properties Component.

The PrimeNG Form Component is built on top of the HTML radio input element with theming. The label property of the RadioButton component can be used to provide a label for the radio input. The properties of the RadioButton are listed below.

Angular PrimeNG Form RadioButton Properties:

• name: It is the name of the radio group.
• value: It is the value of the radio button. The default value is null.
• label: This is the label of the radio button.
• disabled: It is a boolean property that when present, disables the radio button.
• tabindex: It is the index of the element in tabbing order.
• inputId: It is the ID of the focus input to match the label of the component
• ariaLabelledBy: It is used to establish the relation between the components and labels where the value of the property should be the ID of one or more elements.
• ariaLabel: It is the string that labels the input element.
• style: It is the inline style of the element.
• styleClass: It is the style class of the component.
• labelStyleClass: It is the style class of the label of the radio button.

Syntax:

<p-radioButton
    labelStyleClass="..." 
    name="..." 
    value="..." 
    inputId="..."
    [disabled]="..." 
    [label]="'...'" 
    [(ngModel)]="...">
</p-radioButton>

Creating Angular Application and Installing the Module:

Step 1: Create an Angular application using the following command.

ng new appname

Step 2: After creating your project folder i.e. appname, move to it using the following command.

cd appname

Step 3: Finally, Install PrimeNG in your given directory.

npm install primeng --save
npm install primeicons --save

Project Structure: The project Structure will look like this after following the above steps:

Project Structure

Steps to run the application: Run the below command to see the output

ng serve --open

Example 1: This example illustrates the use of the value, disabled, label, inputID, and name properties of the radio button to make a radio group for choosing a car.

• app.component.html:

HTML

<h2 style="color: green">GeeksforGeeks</h2>
<h3>
    Angular PrimeNG Form
    RadioButton Properties Component
</h3>

<h4>Choose a Car</h4>
<h5>
    Second options are disabled using the <i>disabled</i>
    <br> property of the RadioButton Component.
</h5>

<div>
    <p-radioButton
        [(ngModel)]="chosenCar"
        name="car-group"
        value="dzire"
        inputId="car1"
        label="Swift Dzire">
    </p-radioButton>
</div>

<div>
    <p-radioButton
        [(ngModel)]="chosenCar"
        name="car-group"
        value="fortuner"
        inputId="car2"
        label="Toyota Fortuner"
        [disabled]="true">
    </p-radioButton>
</div>

<div>
    <p-radioButton
        [(ngModel)]="chosenCar"
        name="car-group"
        value="venue"
        inputId="car3"
        label="Hyundai Venue">
    </p-radioButton>
</div>

• app.component.ts:

Javascript

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styles: [
        `
        :host ::ng-deep p-radioButton {
            margin-top: 15px;
        }
        `
    ],
})

export class AppComponent {
    chosenCar?: string;
}

• app.module.ts:

Javascript

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule }
    from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';
import { RadioButtonModule } from 'primeng/radiobutton';

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        FormsModule,
        RadioButtonModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})

export class AppModule { }

Output:

Example 2: In this example, we used the labelStyleClass property of the radio button to apply custom CSS to the label of the Radio Buttons.

• app.component.html:

HTML

<h2 style="color: green">GeeksforGeeks</h2>
<h3>
    Angular PrimeNG Form
    RadioButton Properties Component
</h3>

<h5>
    The label is styled using the <i>labelStyleClass</i>
    <br> property of the RadioButton Component.
</h5>

<h4>Are you familiar with Java?</h4>


<div>
    <p-radioButton
        [(ngModel)]="ans"
        labelStyleClass="custom-label-yes"
        name="java"
        value="yes"
        inputId="ans-yes"
        label="Yes, I know Java.">
    </p-radioButton>
</div>

<div>
    <p-radioButton
        [(ngModel)]="ans"
        labelStyleClass="custom-label-no"
        name="java"
        value="no"
        inputId="ans-no"
        label="No, I can't code in Java.">
    </p-radioButton>
</div>

• app.component.css

CSS

:host ::ng-deep p-radioButton {
    margin-top: 15px;
}

:host ::ng-deep .custom-label-yes {
    color: white;
    font-weight: bold;
    background-color: green;
}

:host ::ng-deep .custom-label-no {
    color: white;
    font-weight: bold;
    background-color: red;
}

• app.component.ts:

Javascript

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})

export class AppComponent {
    ans?: string;
}

• app.module.ts:

Javascript

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule }
    from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';
import { RadioButtonModule } from 'primeng/radiobutton';

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        FormsModule,
        RadioButtonModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})

export class AppModule { }

Output:

Reference: http://primefaces.org/primeng/radiobutton