Colors of the component are using the Bootstrap CSS vars (along with a default color) so that if you are using bootstrap the component will take your color palette.
createRating(
props
?):RatingWidget
Create a RatingWidget with given config props
• props?: PropsConfig
<RatingProps
>
a RatingWidget
getRatingDefaultConfig():
RatingProps
Retrieve a shallow copy of the default Rating config
the default Rating config
click(
index
):void
Method to be used when a star is clicked.
To be used in the onclick event of a star
• index: number
Star index, starting from 1
void
handleKey(
event
):void
Method to be used to handle the keyboard.
To be used in the onkeydown of the rating container
• event: KeyboardEvent
void
hover(
index
):void
Method to be used when the mouse enter in a star.
To be used in the onmouseenter of a star
• index: number
Star index, starting from 1
void
leave():
void
Method to be used when the mouse leave the widget.
To be used in the onmouseleave of the rating container
void
new RatingComponent():
RatingComponent
readonly
_widget:AngularWidget
<RatingWidget
>
ariaLabel:
undefined
|string
The aria label
'Rating'
ariaLabelledBy:
undefined
|string
The aria labelled by
''
ariaValueTextFn:
undefined
| (rating
,maxRating
) =>string
Return the value for the 'aria-valuetext' attribute.
Current rating value.
maxRating value.
(rating: number, maxRating: number) => `${rating} out of ${maxRating}`
className:
undefined
|string
CSS classes to be applied on the widget main container
''
disabled:
undefined
|boolean
If true
, the rating is disabled.
false
hover:
EventEmitter
<number
>
An event emitted when the user is hovering over a given rating.
Event payload is equal to the rating being hovered over.
() => {}
leave:
EventEmitter
<number
>
An event emitted when the user stops hovering over a given rating.
Event payload is equal to the rating of the last item being hovered over.
() => {}
maxRating:
undefined
|number
The maximum rating that can be given.
10
rating:
undefined
|number
The current rating. Could be a decimal value like 3.75
.
0
ratingChange:
EventEmitter
<number
>
An event emitted when the rating is changed.
Event payload is equal to the newly selected rating.
() => {}
readonly:
undefined
|boolean
If true
, the rating can't be changed.
false
resettable:
undefined
|boolean
Define if the rating can be reset.
If set to true, the user can 'unset' the rating value by cliking on the current rating value.
true
slotStarFromContent:
undefined
|RatingStarDirective
star:
SlotContent
<StarContext
>
The template to override the way each star is displayed.
({fill}: StarContext) => String.fromCharCode(fill === 100 ? 9733 : 9734)
tabindex:
undefined
|number
Allows setting a custom rating tabindex.
If the component is disabled, tabindex
will still be set to -1
.
0
get
api():W
["api"
]
W
["api"
]
get
state():Signal
<WidgetState
<W
>>
Signal
<WidgetState
<W
>>
get
widget():ContextWidget
<W
>
ngAfterContentChecked():
void
A callback method that is invoked immediately after the default change detector has completed checking all of the directive's content.
void
AfterContentChecked.ngAfterContentChecked
ngOnChanges(
changes
):void
• changes: SimpleChanges
void
ngOnInit():
void
void
onChange(
_
):void
• _: any
void
onTouched():
void
void
registerOnChange(
fn
):void
• fn
The callback function to register
void
Registers a callback function that is called when the control's value changes in the UI.
This method is called by the forms API on initialization to update the form model when values propagate from the view to the model.
When implementing the registerOnChange
method in your own value accessor,
save the given function so your class calls it at the appropriate time.
The following example stores the provided function as an internal method.
registerOnChange(fn: (_: any) => void): void {
this._onChange = fn;
}
When the value changes in the UI, call the registered function to allow the forms API to update itself:
host: {
'(change)': '_onChange($event.target.value)'
}
ControlValueAccessor.registerOnChange
registerOnTouched(
fn
):void
• fn
The callback function to register
void
Registers a callback function that is called by the forms API on initialization to update the form model on blur.
When implementing registerOnTouched
in your own value accessor, save the given
function so your class calls it when the control should be considered
blurred or "touched".
The following example stores the provided function as an internal method.
registerOnTouched(fn: any): void {
this._onTouched = fn;
}
On blur (or equivalent), your class should call the registered function to allow the forms API to update itself:
host: {
'(blur)': '_onTouched()'
}
ControlValueAccessor.registerOnTouched
setDisabledState(
disabled
):void
• disabled: boolean
void
Function that is called by the forms API when the control status changes to or from 'DISABLED'. Depending on the status, it enables or disables the appropriate DOM element.
The following is an example of writing the disabled property to a native DOM element:
setDisabledState(isDisabled: boolean): void {
this._renderer.setProperty(this._elementRef.nativeElement, 'disabled', isDisabled);
}
ControlValueAccessor.setDisabledState
trackByIndex(
index
):number
• index: number
number
writeValue(
value
):void
• value: any
void
Writes a new value to the element.
This method is called by the forms API to write to the view when programmatic changes from model to view are requested.
The following example writes a value to the native DOM element.
writeValue(value: any): void {
this._renderer.setProperty(this._elementRef.nativeElement, 'value', value);
}
ControlValueAccessor.writeValue
containerDirective:
Directive
A directive to be applied to the main container This will handle the keydown, mouseleave, tabindex and aria attributes
starDirective:
Directive
<object
>
A directive to be applied on each star element
index:
number
ariaLabel:
string
The aria label
'Rating'
ariaLabelledBy:
string
The aria labelled by
''
ariaValueTextFn: (
rating
,maxRating
) =>string
Return the value for the 'aria-valuetext' attribute.
• rating: number
Current rating value.
• maxRating: number
maxRating value.
string
(rating: number, maxRating: number) => `${rating} out of ${maxRating}`
className:
string
CSS classes to be applied on the widget main container
''
disabled:
boolean
If true
, the rating is disabled.
false
maxRating:
number
The maximum rating that can be given.
10
onHover: (
rating
) =>void
An event emitted when the user is hovering over a given rating.
Event payload is equal to the rating being hovered over.
• rating: number
void
() => {}
onLeave: (
rating
) =>void
An event emitted when the user stops hovering over a given rating.
Event payload is equal to the rating of the last item being hovered over.
• rating: number
void
() => {}
onRatingChange: (
rating
) =>void
An event emitted when the rating is changed.
Event payload is equal to the newly selected rating.
• rating: number
void
() => {}
rating:
number
The current rating. Could be a decimal value like 3.75
.
0
readonly:
boolean
If true
, the rating can't be changed.
false
resettable:
boolean
Define if the rating can be reset.
If set to true, the user can 'unset' the rating value by cliking on the current rating value.
true
star:
SlotContent
<StarContext
>
The template to override the way each star is displayed.
({fill}: StarContext) => String.fromCharCode(fill === 100 ? 9733 : 9734)
tabindex:
number
Allows setting a custom rating tabindex.
If the component is disabled, tabindex
will still be set to -1
.
0
new RatingStarDirective():
RatingStarDirective
templateRef:
TemplateRef
<any
>
static
ngTemplateContextGuard(_dir
,context
):context is StarContext
• _dir: RatingStarDirective
• context: unknown
context is StarContext
ariaLabel:
string
The aria label
'Rating'
ariaLabelledBy:
string
The aria labelled by
''
ariaValueText:
string
the aria value of the rating
className:
string
CSS classes to be applied on the widget main container
''
disabled:
boolean
If true
, the rating is disabled.
false
interactive:
boolean
is the rating interactive i.e. listening to hover, click and keyboard events
maxRating:
number
The maximum rating that can be given.
10
rating:
number
The current rating. Could be a decimal value like 3.75
.
0
readonly:
boolean
If true
, the rating can't be changed.
false
resettable:
boolean
Define if the rating can be reset.
If set to true, the user can 'unset' the rating value by cliking on the current rating value.
true
star:
SlotContent
<StarContext
>
The template to override the way each star is displayed.
({fill}: StarContext) => String.fromCharCode(fill === 100 ? 9733 : 9734)
stars:
StarContext
[]
the list of stars
tabindex:
number
Allows setting a custom rating tabindex.
If the component is disabled, tabindex
will still be set to -1
.
0
visibleRating:
number
the visible value of the rating (it changes when hovering over the rating even though the real value did not change)
RatingWidget:
Widget
<RatingProps
,RatingState
,object
,RatingActions
,RatingDirectives
>
fill:
number
indicates how much the current star is filled, from 0 to 100
index:
number
the position of the star in the rating