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
HTML
< h2 style = "color: green" > w3wiki </ 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
Javascript
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
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 { 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
HTML
< h2 style = "color: green" > w3wiki </ 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
Javascript
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
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 { 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://primefaces.org/primeng/rating