CngxRating
projects/forms/input/rating/rating.component.ts
Import#
import { CngxRating } from '@cngx/forms/input'
Description#
Star/heart rating value control for cngx-form-field.
Renders its own strip of role="radio" buttons inside a roving-tabindex
container, so arrow keys move and auto-select across stars and the value is a
positional number (value >= step drives cumulative fill). It composes the
roving keyboard engine (CngxRovingTabindex + CngxRovingItem)
rather than reinventing navigation, and provides CNGX_FORM_FIELD_CONTROL
so it drops straight into <cngx-form-field>.
The per-star glyph is a consumer slot (*cngxRatingItem); the control ships a
minimal internal default and no icon component. The chosen value is announced
through a polite live region on every committed change.
<cngx-form-field [field]="f.score">
<cngx-rating [(value)]="score" [max]="5" />
</cngx-form-field>Metadata#
Host#
Providers#
CNGX_FORM_FIELD_CONTROL- useExisting
CngxRating
Relationships
Index#
Properties
Methods
Outputs
Derived State
HostBindings
Inputs#
When true, the strip offers half-star steps (0.5, 1, 1.5, ...).
falseAccessible label used when the control is standalone (no cngx-form-field).
Inside a field the external label wins via aria-labelledby.
''Consumer disable knob. The effective disabled also folds in the surrounding field's disabled state, so a disabled Signal-Forms field disables the strip without an explicit binding.
false, { alias: 'disabled' }Reason announced via aria-describedby while the control is disabled.
''Outputs#
Instance Properties#
Methods#
HostBindings#
| Binding | Expression |
|---|---|
[id] | id() |
[attr.aria-label] | ariaLabelAttr() |
[attr.aria-labelledby] | labelledBy() |
[attr.aria-required] | ariaRequired() |
[attr.aria-invalid] | ariaInvalid() |
[attr.aria-disabled] | ariaDisabled() |
[attr.aria-describedby] | describedBy() |
[class.cngx-rating--disabled] | disabled() |
[class.cngx-rating--focused] | focused() |
HostListeners#
| Event | Handler |
|---|---|
(focusin) | focusin() |
(focusout) | focusout() |