import {Rating} from 'primeng/primeng';
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;
}
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. |
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. |
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. |
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";
}
}