Angular PrimeNG Form Rating Properties Component
Last Updated :
23 Oct, 2022
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:
Project Structure
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
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
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 = 2;
}
|
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 used the iconCancelClass to change the cancel button icon and used the disabled property to disable the rating input.
app.component.html
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
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
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...