@gedasx/rating-stars-component

rating-stars-component

Interactive Angular component for displaying star ratings. Component works for all Angular versions from 4 to 16.

Demo

Demo rating-stars-component

Installation

• npm i @gedasx/rating-stars-component
• Edit your app.module file:

...
import { StarRatingLibraryModule } from '@gedasx/rating-stars-component';

@NgModule({
  ...
  imports: [
    ...
    StarRatingLibraryModule
  ],
  ...
})

Usage

Inputs

• size [integer] - size of start in pixels (default size - 20px)
• initFilledStars [0 | 1 | 2 | 3 | 4 | 5] - initial number of prefilled stars (default 2)
• disabled [boolean] - determines whether component is read-only (default false)

Events

• numberOfStartsEvent [EventEmitter] - provides rating value when user clicks on star

Examples

Default values:

<rating-stars-component></rating-stars-component>

Read-only mode:

<rating-stars-component [disabled]="true"></rating-stars-component>

Size of stars 30px, click on start action calls clickStar method and emits rating number:

<rating-stars-component [starSize]="30" (numberOfStartsEvent)="clickStar($event)"></rating-stars-component>

License

MIT