API rating

• props?: PropsConfig<RatingProps>

RatingWidget

a RatingWidget

RatingProps

the default Rating config

leave(): void

Leave the rating, resetting the visible rating to the rating value and triggering the onLeave callback

void

setHoveredRating(index): void

Sets the hovered rating value.

• index: number

Star index, starting from 1

void

setRating(index): void

Sets the rating value.

• index: number

Star index, starting from 1

void

• ControlValueAccessor

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

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"]

Retrieves the widget api

W["api"]

the widget api

get directives(): W["directives"]

Retrieves the widget directives

W["directives"]

the widget directives

get state(): AngularState<W>

Retrieves the widget state as an Angular Signal

AngularState<W>

the widget state

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

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

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)

fill: number

indicates how much the current star is filled, from 0 to 100

index: number

the position of the star in the rating