Angular PrimeNG Form Rating Events 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 be seeing Angular PrimeNG Form Rating Events 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 events of the form rating component are listed below.

Angular PrimeNG Form Rating Events:

• onRate: This event accepts a callback function that is invoked when the rating value is changed.
• onCancel: This event accepts a callback function that is invoked when the rating value is removed.

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:

<p-rating 
    [stars]="..."
    (event-name)="callbackFunction()"
    [(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: This example illustrates the use of the onRate event of the rating component. Whenever the rating value changes a toast is shown with the updated rating value.

app.component.html

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

<p-rating [stars]="5" 
    (onRate)="handleOnRate($event)" 
    [(ngModel)]="rateValue">
</p-rating>
<p-toast></p-toast>

app.component.ts

import { Component } from '@angular/core';
import { MessageService } from 'primeng/api';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
    providers: [MessageService],
})
export class AppComponent {
    constructor(private ms: MessageService) { }
    rateValue: number = 0;

    handleOnRate(ev: any) {
        this.ms.add({
            severity: 'success',
            summary: 'Rating Changed',
            detail: 'New Value: ' + ev.value,
        });
    }
}

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

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

Output:

Example 2: In this example, we used the onCancel event of the Rating component provided by Angular PrimeNG to show a toast message whenever the rating is removed.

app.component.html

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

<p-rating [stars]="5"
    (onCancel)="handleOnCancel()"
    [(ngModel)]="rateValue">
</p-rating>
<p-toast></p-toast>

app.component.ts

import { Component } from '@angular/core';
import { MessageService } from 'primeng/api';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
    providers: [MessageService],
})
export class AppComponent {
    constructor(private ms: MessageService) { }
    rateValue: number = 0;

    handleOnCancel() {
        this.ms.add({
            severity: 'error',
            summary: 'Rating Removed',
            detail: 'onCancel Event Triggered',
        });
    }
}

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

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

Output:

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