AfroRating

AfroRating is an Angular frontend star rating library.

Installing

npm install afrorating

Usage

Component

import { Component } from '@angular/core';
import { AfroRatingComponent } from 'afrorating';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [AfroRatingComponent],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  rate = 5;

  onHoverChange(event: MouseEvent) {
    console.log("hoverchanged", event);
  }

  onRateChange(value: number) {
    console.log("ratechanged", value);
  }
}

Template

<div style="width:100%">
    <afrorating [total]="10" [(rate)]="rate" [color]="'#ce0101'" [scaleDown]="10" (rateChange)="onRateChange($event)" (hoverChange)="onHoverChange($event)" [readonly]="false"></afrorating>
</div>

<div style="display:flex;flex-direction:row;width:50%;align-items:stretch;">
        <afrorating [total]="10" [(rate)]="rate" [color]="'green'" [showTooltip]="false" [readonly]="true"></afrorating>
        <div style="text-align:center;width:6vw;font-size:4vw;padding-left:1vw;padding-right:1vw" [style]="rate ? '' : 'visibility:hidden'">
            {{rate}}
        </div>
        <button (click)="rate=0" style="width:10vw;color:white;background-color:green;">Clear</button>
</div>

Input Attributes

| Name | Type | Default | Description | | --- | --- | --- | --- | | color | string | "green" | CSS color value of icons | | rate | number | 0 | Current rating value | | readonly | boolean | false | Whether or not to make icons interactive | | scaleDown | number | 0 | Value to shrink icon size | | showTooltip | boolean | true | Whether or not to display value on hover | | total | number | 5 | Max value of rating scale |

Events

| Name | Type | Payload | Description | | --- | --- | --- | --- | | hoverChange | function | MouseEvent | Function to call when hover event changes | | rateChange | function | number | Function to call when rating value changes |