# @alwaan/ng-star-rating
Angular Star Rating Component
## Installation
To use this star rating component in your Angular project, follow these steps:
1. Install the package using npm or yarn:
```bash
npm install @alwaan/ng-star-rating
or
yarn add @alwaan/ng-star-rating
-
Import the
NgStarRatingModule
in your application module (e.g.,app.module.ts
):import { NgModule } from '@angular/core'; import { NgStarRatingModule } from '@alwaan/ng-star-rating'; @NgModule({ imports: [NgStarRatingModule], // ... }) export class YourAppModule { }
-
Use the component in your HTML template:
<ng-star-rating [isReadOnly]="false" [allowHover]="true" [count]="5" [size]="20" [color]="'grey'" [filledColor]="'gold'" [value]="0" (selectedValue)="handleRating($event)" ></ng-star-rating>
-
In your component, implement the
handleRating
method to receive and handle the rating events.
Usage
-
isReadOnly
: If set totrue
, the rating component will be read-only. -
allowHover
: If set totrue
, hovering over stars will allow for rating changes. -
count
: The number of stars in the rating component. -
size
: The size of each star in pixels. -
color
: The color of unselected stars. -
filledColor
: The color of selected (filled) stars. -
value
: The initial rating value.
Example of handling rating events:
import { Component } from '@angular/core';
@Component({
selector: 'app-your-component',
templateUrl: './your-component.component.html',
styleUrls: ['./your-component.component.css']
})
export class YourComponent {
handleRating(rating: number): void {
// Handle the rating value here (e.g., send it to your backend).
console.log(`User rated: ${rating} stars`);
}
}
License
This package is distributed under the MIT License.
Issues
If you encounter any issues or have suggestions for improvements, please email us at support@alwaantechnology.com.