Angular PrimeNG Form RadioButton Styling 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. In this article, we will see Angular PrimeNG Form RadioButton Styling Component.

The Form RadioButton Component is built on top of the HTML radio input element with theming. There are 7 structural styling classes for the radio button that are listed below.

Angular PrimeNG Form RadioButton Styling Classes:

• p-radiobutton: It is the container element of the radio button.
• p-radiobutton-box: It is the container element of the icon.
• p-radiobutton-icon: It is the icon element of the radio button.
• p-checkbox-label: It is the label element of the radio button.
• p-label-active: It is the label element of the radio button when it is in a checked state.
• p-label-focus: It is the label element of the radio button when it is in the focus state.
• p-label-disabled: It is the label element of the radio button when it is in a disabled state.

Angular PrimeNG Form RadioButton Styling 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.

Syntax:

// In app.component.html
<p-radioButton 
   name="..." 
   value="..."
   label="..." 
   [(ngModel)]="...">
</p-radioButton>

// In app.component.css
:host ::ng-deep .RadioButton-Styling-Class{
    // CSS
}

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

Example 1: In this example, we changed the color of the radiobutton from blue and white to red and green.

• app.component.html

HTML

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

<h2>Choose a Topic</h2>
<p-radioButton name="grp1"
               value="rad1"
               label="HTML"
               [(ngModel)]="radioGrpVal">
</p-radioButton>
<br>
<p-radioButton name="grp1"
               value="rad2"
               label="CSS"
               [(ngModel)]="radioGrpVal">
</p-radioButton>
<br>
<p-radioButton name="grp1"
               value="rad3"
               label="JAVA"
               [(ngModel)]="radioGrpVal">
</p-radioButton>
<br>
<p-radioButton name="grp1"
               value="rad4"
               label="C++"
               [(ngModel)]="radioGrpVal">
</p-radioButton>

• app.component.css

CSS

:host ::ng-deep .p-radiobutton {
    margin-top: 10px;
}

:host ::ng-deep .p-radiobutton
    .p-radiobutton-box.p-highlight,
:host ::ng-deep .p-radiobutton
    .p-radiobutton-box.p-highlight:hover {

    background-color: green;
    border-color: green;
    box-shadow: none;
}

:host ::ng-deep .p-radiobutton
    .p-radiobutton-box:not(.p-disabled)
    :not(.p-highlight):hover {
    border-color: green;
}

:host ::ng-deep .p-radiobutton-icon {
    background-color: red !important;
}

• app.component.ts

Javascript

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

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

export class AppComponent {
    radioGrpVal?: 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 above-listed radio button styling classes to change the styling of the radio label when it is in focus, active and disabled state.

• app.component.html

HTML

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

<h2>Choose a Topic</h2>
<p-radioButton #option1
               name="grp1"
               value="rad1"
               label="HTML"
               [(ngModel)]="radioGrpVal">
</p-radioButton>
<br>
<p-radioButton #option2
               name="grp1"
               value="rad2"
               label="CSS"
               [(ngModel)]="radioGrpVal">
</p-radioButton>
<br>
<p-radioButton [disabled]="true"
               name="grp1"
               value="rad3"
               label="JAVASCRIPT"
               [(ngModel)]="radioGrpVal">
</p-radioButton>
<br>
<div class="mt-5">
    <button pButton
            label="Focus Option-1"
            (click)="focusOption1()"
            class="mr-4">
    </button>
    <button pButton
            label="Focus Option-2"
            (click)="focusOption2()">
    </button>
</div>

• app.component.css

CSS

:host ::ng-deep p-radiobutton {
    margin-top: 10px;
}

:host ::ng-deep .p-radiobutton-label-focus {
    color: blue;
    font-weight: bold;
}

:host ::ng-deep .p-radiobutton-label-active {
    font-weight: bold;
    color: green;
}

:host ::ng-deep .p-radiobutton-label.p-disabled {
    color: red;
    font-weight: bold;
}

• app.component.ts

Javascript

import { Component, ViewChild } from '@angular/core';
import { RadioButton } from 'primeng/radiobutton';

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

export class AppComponent {
    @ViewChild("option1") option1!: RadioButton;
    @ViewChild("option2") option2!: RadioButton;
    radioGrpVal?: string;

    focusOption1()
    {
        this.option1.focus();
    }

    focusOption2()
    {
        this.option2.focus();
    }
}

• 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';
import { ButtonModule } from 'primeng/button';

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

Output:

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