Angular PrimeNG Form Rating Styling Component

Angular PrimeNG is an open-source library that consists of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. In this article, we will Angular PrimeNG Form Rating Styling Component.

The Form Rating Component is a selection input based on the star icon. It can be usually seen on product pages of e-commerce websites like Amazon, Flipkart, Alibaba, etc. The structural styling classes of the form rating component are listed below.

Angular PrimeNG Form Rating Styling Classes:

• p-rating: This class is applied to the container element of the rating component.
• p-rating-star: This class is applied to the rating icon elements.
• p-rating-star-on: This class is applied to the star elements which are in on-state.
• p-rating-cancel: This class is applied to the cancel icon of the rating component.

Angular PrimeNG Form Rating Properties:

• stars: This property specifies the total number of stars in the rating component.
• cancel: This property specifies whether to show a cancel icon to remove the rating.
• disabled: When present, this property disables the rating component.
• readOnly: When present, this property makes the treating read-only i.e it cannot be changed.
• iconOnClass: It is the style class of the icon. The default value is “pi pi-star-fill”.
• iconOffClass: It is the style class of the off icon. The default value is “pi pi-star”.
• iconCancelClass: It is the style class of the cancel icon. The default value is “pi pi-ban”.
• iconOnStyle: It is the inline style of the icon. The default value is null.
• iconOffStyle: It is the inline style of the off icon. The default value is null.
• iconCancelStyle: It is the inline style of the cancel icon. The default value is null.

Syntax:

// In app.component.html
<p-rating 
   [(ngModel)]="rateValue1">
</p-rating>

// In app.component.css
:host ::ng-deep .Styling-Class {
    // Custom 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 used the above-listed structural styling classes to change the color of the star icons to green.

app.component.html

HTML

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

<h4>Rating with Custom Icon Color</h4>
<p-rating [stars]="6"
          iconCancelClass="pi pi-times"
          [(ngModel)]="rateValue1">
</p-rating>

app.component.css

CSS

:host ::ng-deep
    .p-rating-icon:not(.p-rating-cancel),
:host ::ng-deep
    .p-rating-icon:not(.p-rating-cancel):hover {
    color: green !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 {
    rateValue1: number = 0;
}

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 { RatingModule } from 'primeng/rating';

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

Output:

Example 2: In this example, we changed the size of the rating icons and changed the color of the cancel icon to blue.

app.component.html

HTML

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

<h4>Default Rating Component</h4>
<p-rating
    [stars]="5"
    iconCancelClass="pi pi-times"
    [(ngModel)]="rateValue1">
</p-rating>

<h4>Rating with Custom Icon Size
    and Blue Colored Cancel Icon</h4>
<p-rating
    [stars]="5"
    class="custom-rate"
    iconCancelClass="pi pi-times"
    [(ngModel)]="rateValue2">
</p-rating>

app.component.css

CSS

:host ::ng-deep .custom-rate .p-rating-icon {
    margin-top: 30px;
    font-size: 50px;
}

:host ::ng-deep .custom-rate .p-rating-icon.p-rating-cancel,
:host ::ng-deep .custom-rate .p-rating-icon.p-rating-cancel:hover{
    color: blue !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 {
    rateValue1: number = 0;
    rateValue2: number = 0;
}

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 { RatingModule } from 'primeng/rating';

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

Output:

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