Rating Rating components is a star based selection input.

Basic {{val1}}


Callback {{val2}}

{{msg}}

No Cancel {{val3}}


ReadOnly


Disabled


Import


import {Rating} from 'primeng/primeng';

Getting Started

Rating is defined using p-rating element and the value property supports two-way binding to manage the model.


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


export class ModelComponent {

    val: number;

}

As value is two-way binding enabled, defining a default value is enough to render the initial number of selected stars based on it.


export class ModelComponent {

    val: number = 3;

}

Attributes

Name Type Default Description
value number null Number of selected stars.
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

Native component that requires css of PrimeUI Rating.


<h3 class="first">Basic {{val1}}</h3> 
<p-rating [(value)]="val1"></p-rating>
<br />

<h3>Callback {{val2}}</h3>
<p-rating [(value)]="val2" (onRate)="handleRate($event)" (onCancel)="handleCancel($event)"></p-rating> <span *ngIf="msg" style="margin-left:10px">{{msg}}</span>
<br />

<h3>No Cancel {{val3}}</h3> 
<p-rating [(value)]="val3" [cancel]="false"></p-rating>
<br />

<h3>ReadOnly</h3> 
<p-rating value="5" readonly="true" stars="10" [cancel]="false"></p-rating>
<br />

<h3>Disabled</h3> 
<p-rating [value]="val4" disabled="true" stars="10"></p-rating>
<br />


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";
    }
}