ngx-star-rating-input

ngx-star-rating-input is an Angular component that provides a star rating system for your applications. Perfect for feedback forms, product ratings, or review systems.

Features

• Customizable number of stars
• Ability to change the color of filled and empty stars
• Supports hover effect to preview rating
• Easily integrates with Angular forms
• No dependencies, lightweight
• Can be disabled to prevent user interaction

Installation

npm install ngx-star-rating-input

Usage

1. Import the Module

Add NgxStarRating to your application's module:

import { NgxStarRating } from "ngx-star-rating-input";

@NgModule({
  declarations: [AppComponent],
  imports: [NgxStarRating], // Add the module here
  bootstrap: [AppComponent],
})
export class AppModule {}

2. Use in Templates

Add the component to your templates:

<ngx-star-rating [(ngModel)]="rating"></ngx-star-rating>

3. Customize the Component

You can customize the number of stars, colors, and size by passing inputs:

<ngx-star-rating 
  [(ngModel)]="rating" 
  [count]="5" 
  [filledColor]="'gold'" 
  [emptyColor]="'lightgray'" 
  [fillOnHover]="true" 
  [size]="24">
  </ngx-star-rating>

4. Binding with Angular Forms

You can bind the rating to a form model using ngModel or formControl for two-way data binding:

With ngModel:

<form>
  <ngx-star-rating [(ngModel)]="rating" name="rating"></ngx-star-rating>
</form>

With formControl:

<ngx-star-rating [formControl]="ratingControl"></ngx-star-rating>

5. Handling Rating Changes

The component emits the current rating value on change:

<ngx-star-rating (ratingChange)="ratingChange($event)"></ngx-star-rating>

ratingChange(rating: number) {
  console.log('Rating changed:', rating);
}

6. Disable the Rating

You can disable the star rating component by setting the disabled input to true:

<ngx-star-rating [(ngModel)]="rating" [disabled]="true"></ngx-star-rating>

Input Properties

| Property | Type | Default | Description | | ----------- | ------- | ----------- | ---------------------------------------------- | | count | number | 5 | The number of stars to display. | | filledColor | string | 'gold' | The color of the filled stars. | | emptyColor | string | 'lightgray' | The color of the empty stars. | | fillOnHover | boolean | true | Whether the stars fill when hovered. | | size | number | 14 | The size of the stars in pixels. | | disabled | boolean | false | Whether the star rating component is disabled. |

Output Events

| Event | Type | Description | | ------------ | -------------------- | ----------------------------------------------- | | ratingChange | EventEmitter | Emits the current rating value when it changes. |

License

This project is licensed under the MIT License. (©) Vipin.

Happy coding! 🚀