Input - Rating - 《PrimeNG Document》

Documentation
Source

RatingRating components is a star based selection input.

Documentation

Import


import {RatingModule} from 'primeng/rating';

Getting Started

Two-way value binding is defined using ngModel.


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


export class ModelComponent {
    val: number;
}

Defining a default value would be enough to display the initial number of selected stars.


export class ModelComponent {
    val: number = 3;
}

Model Driven Forms

Rating can be used in a model driven form as well.


<p-rating formControlName="score"></p-rating>

Properties

Name	Type	Default	Description
stars	number	5	Number of stars.
cancel	boolean	true	When specified a cancel icon is displayed to allow removing the value.
disabled	boolean	false	When present, it specifies that the element should be disabled.
readonly	boolean	false	When present, changing the value is not possible.
iconOnClass	string	pi pi-star	Style class of the on icon.
iconOffClass	string	pi pi-star	Style class of the off icon.
iconCancelClass	string	pi pi-ban	Style class of the cancel icon.
iconOnStyle	object	null	Inline style of the on icon.
iconOffStyle	object	null	Inline style of the off icon.
iconCancelStyle	object	null	Inline style of the cancel icon.

Events

Name	Parameters	Description
onRate	event.originalEvent: browser event event.value: selected value	Callback to invoke on rate change.
onCancel	event: browser event	Callback to invoke when value is removed.

Styling

Following is the list of structural style classes, for theming classes visit theming page.

Name	Element
ui-rating	Container element
ui-rating-star	Star element
ui-rating-star-on	Selected star element.
ui-rating-cancel	Cancel icon.

Dependencies

None.

Source

View on GitHub


<h3 class="first">Basic {{val1}}</h3> 
<p-rating [(ngModel)]="val1"></p-rating>
<h3>Callback {{val2}}</h3>
<p-rating [(ngModel)]="val2" (onRate)="handleRate($event)" (onCancel)="handleCancel($event)"></p-rating> <span *ngIf="msg" style="margin-left:10px">{{msg}}</span>
<h3>No Cancel {{val3}}</h3> 
<p-rating [(ngModel)]="val3" [cancel]="false"></p-rating>
<h3>ReadOnly</h3> 
<p-rating [ngModel]="5" readonly="true" stars="10" [cancel]="false"></p-rating>
<h3>Disabled</h3> 
<p-rating [ngModel]="val4" disabled="true" stars="10"></p-rating>
<h3>Custom Icons</h3>
<p-rating [ngModel]="val5" iconOnClass="pi pi-circle-on" iconOffClass="pi pi-circle-off" iconCancelClass="pi pi-times">;</p-rating>


export class RatingDemo {
    val1: number;
    val2: number = 5;
    val3: number;
    val4: number = 5;
    val5: number;
    msg: string;
    handleRate(event) {
        this.msg = "You have rated " + event.value;
    }
    handleCancel(event) {
        this.msg = "Rating Cancelled";
    }
}