import {Rating} from 'primeng/primeng';
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;
}
Rating can be used in a model driven form as well.
<p-rating formControlName="score"></p-rating>
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. |
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 [(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";
}
}