# @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

2. 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 { }

3. 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>

4. In your component, implement the handleRating method to receive and handle the rating events.

Usage

• isReadOnly: If set to true, the rating component will be read-only.
• allowHover: If set to true, 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 [email protected].