ngx-star-rating-input
Version:
An Angular library for displaying star ratings.
124 lines (86 loc) • 3.44 kB
Markdown
# 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
```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! 🚀