ng-rating-pro

NgRatingPro

A powerful and customizable Angular rating component that allows full and half ratings with support for read-only mode, dynamic scaling, and SVG customization.
Perfect for use in reviews, feedback forms, and rating-based applications.

---

Features

• Fully customizable SVG-based rating stars.
• Support for full and half ratings.
• Adjustable scale, size, and spacing between stars.
• Configurable readonly mode for display-only purposes.
• Responsive design with dynamic container sizing.

Upcoming Features

• Implement alternative icon options (hearts, emojis, lightning bolts)
• Enable custom icon upload functionality
• Add hover tooltip information feature
• Integrate smooth rating transitions and effects
• Ensure full accessibility compliance (ARIA standards)

---

Installation and Usage

Install the package via npm:

npm install ng-rating-pro

Step 1: Import the Module

Add the NgRatingProComponent to your Angular module:

import { NgModule } from "@angular/core";
import { NgRatingProComponent } from "ng-rating-pro";

@NgModule({
  declarations: [
    // other components
    NgRatingProComponent,
  ],
  exports: [
    NgRatingProComponent, // Make it available for use in other modules
  ],
})
export class AppModule {}

Step 2: Add the Component to Your Template

Use the ngRatingPro selector in your Angular template:

<ngRatingPro
  [scale]="5"
  [rating]="3.5"
  [allowHalf]="true"
  [size]="24"
  [spacing]="10"
  [readonly]="false"
  (ratingChange)="onRatingChange($event)"
></ngRatingPro>

---

Inputs:

Input	Type	Default Value	Description
scale	number	5	Number of stars to display.
rating	number	0	Initial rating value. Can be updated dynamically.
allowHalf	boolean	true	Allows half-star ratings when true.
size	number	20	Size of the stars in pixels.
spacing	number	8	Space between stars in viewBox units.
readonly	boolean	false	Disables click interactions when set to true.

Outputs:

Output	Type	Description
ratingChange	number	Emits the updated rating whenever a star is clicked.

Example:

onRatingChange(newRating: number): void {
  console.log('Updated Rating:', newRating);
}

---

Changelog

See CHANGELOG.md for realease notes and changelog.

---

Contributing

Contributions are welcome! If you'd like to improve this component:

• Fork the repository.
• Create a feature branch.
• Submit a pull request with detailed explanations.

  Read CONTRIBUTIONS.md for more info.

---

License

This project is licensed under the MIT License. See the LICENSE file for details.