Rating Rating components is a star based selection input.

Basic {{val1}}


Callback {{val2}}

{{msg}}

No Cancel {{val3}}


ReadOnly


Disabled


Custom Icons


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 fa-star Style class of the on icon.
iconOffClass string fa-star Style class of the off icon.
iconCancelClass string fa-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.

 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="fa-circle" iconOffClass="fa-circle-o" iconCancelClass="fa-close">;</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";
    }
}