Rating

import { Component } from '@angular/core';
import { WrRating } from 'ngwr/rating';

@Component({ imports: [WrRating] })
export class MyComponent {}

<wr-rating [(value)]="score" />

<wr-rating [(value)]="score" step="0.5" />

<wr-rating [(value)]="score" [count]="10" />

<wr-rating [value]="4.5" step="0.5" [readonly]="true" />

A value above count is drawn as full stars but stays in the model. Flag it with a max() rule.

Name	Description	Type	Default
`count`	Total number of slots.	`number`	`5`
`step`	Step granularity — `1` for whole stars, `0.5` for halves.	`0.5 \| 1`	`1`
`readonly`	Read-only — value is displayed but not interactive.	`boolean`	`false`
`disabled`	Disable interaction. Bound automatically from the field's disabled state when used with `[formField]`.	`boolean`	`false`
`size`	Control size — scales the icons + gaps.	`WrRatingSize`	`'md'`
`ariaLabel`	Accessible label. Falls back to `rating.label`, then `'Rating'`.	`string \| null`	`null`
`value`	The rating. Bound by `[formField]`, or two-way via `[(value)]`.	`number \| null`	`null`
`(touch)`	Emitted on blur so a bound field can mark itself touched.	`void`	—

Built on	Form

Installation