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:
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;" >w3wiki</ 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;" >w3wiki</ 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