Angular PrimeNG Form RadioButton Styling Component
Last Updated :
01 Nov, 2022
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.
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 >
|
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 ;
}
|
Javascript
import { Component } from '@angular/core' ;
@Component({
selector: 'app-root' ,
templateUrl: './app.component.html' ,
styleUrls: [ './app.component.css' ],
})
export class AppComponent {
radioGrpVal?: string;
}
|
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.
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 >
|
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 ;
}
|
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();
}
}
|
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
Share your thoughts in the comments
Please Login to comment...