Angular PrimeNG Form Rating 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. In this article, we will Angular PrimeNG Form Rating Properties 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 properties of the form rating component are listed below.

Angular PrimeNG Form Rating Properties:

• stars: This is the property used to specify the number of stars.
• cancel: This is a boolean property which when set to true, a chance icon is shown to reset the current rating.
• disabled: This boolean property when specified disables the rating component.
• readonly: This is a boolean property which when specifies makes the rating component read-only and changing the value is not possible.
• iconOnClass: It is the style class of the on-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 on-icon.
• iconOffStyle: It is the inline style of the off-icon.
• iconCancelStyle: It is the inline style of the cancel-icon.

Syntax:

<p-rating 
    [stars]="..."
    [cancel]="..."

    [disabled]="true | false"

    [readOnly]="true | false"

    ...
    [(ngModel)]="...">
</p-rating>

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 article, we used the star property of the rating component to show only 3 stars and used the readOnly property to make the rating input read-only.

app.component.html

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

<h4>Rating with 3 stars</h4>
<p-rating [stars]="3" [(ngModel)]="rateValue1">
</p-rating>

<h4>ReadOnly Rating with 4 stars</h4>
<p-rating [stars]="4" [readonly]="true" 
          [(ngModel)]="rateValue2">
</p-rating>

app.component.ts

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 = 2;
}

app.module.ts

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 used the iconCancelClass to change the cancel button icon and used the disabled property to disable the rating input.

app.component.html

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

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

<h4>Disabled Rating</h4>
<p-rating [stars]="4" [readonly]="true"
          [(ngModel)]="rateValue2">
</p-rating>

app.component.ts

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

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://www.primefaces.org/primeng/rating