afrorating

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