API rating

• props?: PropsConfig<RatingProps>

RatingWidget

a RatingWidget

RatingProps

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

• ControlValueAccessor
• AfterContentChecked

new RatingComponent(): 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>

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

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)

fill: number

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

index: number

the position of the star in the rating