Rating component is a star based selection input.
import { RatingModule } from 'primeng/rating';
Two-way value binding is defined using ngModel.
<p-rating [(ngModel)]="value"></p-rating>
Rating can also be used with reactive forms. In this case, the formControlName property is used to bind the component to a form control.
<form [formGroup]="formGroup">
<p-rating formControlName="value"></p-rating>
</form>
A cancel icon is displayed to reset the value by default, set cancel as false to remove this option.
<p-rating [(ngModel)]="value" [cancel]="false"></p-rating>
Number of stars to display is defined with stars property.
<p-rating [(ngModel)]="value" [stars]="10"></p-rating>
Templating allows customizing the content where the icon instance is available as the implicit variable.
<p-rating [(ngModel)]="value" stars="5">
<ng-template pTemplate="cancel">
<img src="https://primefaces.org/cdn/primeng/images/demo/rating/cancel.png" width="25px" height="25px" />
</ng-template>
<ng-template pTemplate="onicon">
<img src="https://primefaces.org/cdn/primeng/images/demo/rating/custom-icon-active.png" width="25px" height="25px" />
</ng-template>
<ng-template pTemplate="officon">
<img src="https://primefaces.org/cdn/primeng/images/demo/rating/custom-icon.png" width="25px" height="25px" />
</ng-template>
</p-rating>
When readOnly present, value cannot be edited.
<p-rating [(ngModel)]="value" [readonly]="true" [cancel]="false"></p-rating>
When disabled is present, a visual hint is applied to indicate that the Knob cannot be interacted with.
<p-rating [(ngModel)]="value" [disabled]="true" [cancel]="false"></p-rating>
Following is the list of structural style classes, for theming classes visit theming page.
Name | Element |
---|---|
p-rating | Container element |
p-rating-star | Star element |
p-rating-star-on | Selected star element. |
p-rating-cancel | Cancel icon. |
Rating component internally uses radio buttons that are only visible to screen readers. The value to read for item is retrieved from the locale API via star and stars of the aria property.
Keyboard interaction is derived from the native browser handling of radio buttons in a group.
Key | Function |
---|---|
tab | Moves focus to the star representing the value, if there is none then first star receives the focus. |
left arrowup arrow | Moves focus to the previous star, if there is none then last radio button receives the focus. |
right arrowdown arrow | Moves focus to the next star, if there is none then first star receives the focus. |
space | If the focused star does not represent the value, changes the value to the star value. |
API defines helper props, events and others for the PrimeNG Rating module.
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 | null | Style class of the on icon. |
iconOffClass | string | null | Style class of the off icon. |
iconCancelClass | string | null | 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. |
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. |
Name | Parameters |
---|---|
onicon | - |
officon | - |
cancelicon | - |