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

![ngx-star-rating-input preview](https://i.ibb.co/CR20Y7f/chrome-0w-VCO9-YRdu.gif)

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

```bash
npm install ngx-star-rating-input
```

## Usage

### 1. Import the Module

Add `NgxStarRating` to your application's module:

```typescript
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:

```html
<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:

```html
<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`:

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

With `formControl`:

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

### 5. Handling Rating Changes

The component emits the current rating value on change:

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

```typescript
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`:

```html
<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<number> | Emits the current rating value when it changes. |

## License

This project is licensed under the MIT License. (©) [Vipin](https://github.com/vipinkc4).

Happy coding! 🚀