Rating Rating components is a star based selection input.

Basic {{val1}}


Callback {{val2}}

{{msg}}

No Cancel {{val3}}


ReadOnly


Disabled


Import


import {RatingModule} from 'primeng/primeng';

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>

Attributes

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.

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.


<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>


export class RatingDemo {

    val1: number;

    val2: number = 5;

    val3: number;

    val4: number = 5;

    msg: string;

    handleRate(event) {
        this.msg = "You have rated " + event.value;
    }

    handleCancel(event) {
        this.msg = "Rating Cancelled";
    }
}