rm-ng-star-rating

See It In Action

Interactive star rating with customizable colors and sizes (Full/Half) Star!

---

rm-ng-star-rating is a lightweight, highly customizable Angular star rating component with zero dependencies. Built for modern Angular applications with full TypeScript support, standalone component architecture, and optimized for performance.

---

Table of Contents

• Why This Library
• Installation
• Quick Start / Usage
• API Reference
• Advanced Configuration
• Peer Dependencies
• Best Practices
• Performance Optimization
• Browser Support
• Versioning & Angular Compatibility
• Breaking Changes
• FAQ
• Troubleshooting
• Project Structure
• Contributing Guidelines
• Roadmap
• Changelog
• License
• Examples
• Usage Examples

Quick Start

Installation

npm install rm-ng-star-rating

Basic Usage

import { Component } from '@angular/core';
import { RmNgStarRatingComponent } from 'rm-ng-star-rating';

@Component({
  selector: 'app-example',
  standalone: true,
  imports: [RmNgStarRatingComponent],
  template: `
    <rm-ng-star-rating [rating]="3.5"></rm-ng-star-rating>
  `
})
export class ExampleComponent {
  rating = 3.5;
}

See Usage Guide for more examples.

Features

• Zero Dependencies - Absolutely no external dependencies
• Standalone Component - Modern Angular standalone architecture
• Highly Customizable - Configure colors, sizes, spacing, and behavior
• Interactive & Read-Only Modes - Perfect for both user input and display-only scenarios
• Half-Star Support - Precise ratings with half-star increments
• Keyboard Accessible - Full keyboard navigation support
• Type-Safe - Full TypeScript support
• Mobile-Ready - Touch-optimized for all devices

Live Examples

Explore our comprehensive examples to see the library in action:

• Basic Usage - Simple star rating implementation
• Custom Styling - Colors, sizes, and star counts customization
• Reactive Forms - Angular Reactive Forms integration
• Product Reviews - Realistic customer reviews list
• Read-Only Mode - Static display scoring
• Performance Optimization - OnPush and large list optimization
• UX & Accessibility - Interactive feedback and accessibility

View All Examples →

Live Demo & Playground

Try it yourself! Interactive demos available now:

Interactive Playground Try all features live in your browser	Complete Examples Copy-paste ready code samples
npm Registry Install and view package details	Source Code Star, fork, and contribute

Installation & Setup

For detailed installation instructions, see our Installation Guide.

Usage

For comprehensive usage examples and API documentation, see our Usage Guide.

License

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

Support This Project

If rm-ng-star-rating has helped you build better Angular applications, please consider:

Star This Repository

A star helps other developers discover this library!

Why Your Star Matters

• Increases visibility in the Angular community
• Supports ongoing development and maintenance
• Encourages more open-source contributions
• Helps other developers find quality tools

Statistics

Acknowledgements

This library wouldn't be possible without:

• Angular Team - Amazing framework and ecosystem
• Community Contributors - Thank you for feedback and improvements
• Open Source Community - For inspiration and best practices

Special thanks to everyone who has starred, used, or contributed to this project!

Support and Community

Getting Help

Need assistance? We're here to help!

Support Channel	Link	Best For
Bug Reports	Report Bug	Technical issues
Feature Requests	Request Feature	New features
Discussions	Join Discussion	General questions
Email	mr.rajatmalik@gmail.com	Direct support

Documentation

• GitHub Repository
• npm Package
• Live Demo
• Changelog

Community

• Star the repository to show support
• Watch for updates and new releases
• Share your use cases and feedback
• Contribute code or documentation

Stay Updated

• Follow the project on GitHub
• Star the repository for updates
• Watch for new releases

Other Libraries

UI Components

Library	Description	npm Link
rm-range-slider	Lightweight two-thumb range slider with tooltips and color customization
rm-ng-range-slider	Angular-specific version of the dual range slider
rm-carousel	Simple, responsive carousel component
rm-image-slider	Minimal image slider with smooth transitions
rm-ng-star-rating	Configurable Angular star rating component with readonly mode

PDF & Export Libraries

Library	Description	npm Link
rm-ng-export-to-csv	Export JSON data to CSV with zero dependencies
@codewithrajat/rm-ng-pdf-export	Image-based PDF export tool for Angular applications
@codewithrajat/rm-ng-structure-pdf	Generate structured PDFs for reports, invoices, or documents

Utility Libraries

Library	Description	npm Link
rm-ng-device-detection	Detect device type, OS, and browser in Angular
rm-colorful-console-logger	Stylish multi-color console logger for better debugging

Notifications

Library	Description	npm Link
rm-pushnotify	Lightweight push-style toast notification utility

Meta & Personal Branding

Library	Description	npm Link
about-rajat	Developer portfolio package for branding and quick personal info

All Packages

Browse all my packages:

• npm: rajatmalik
• GitHub: @malikrajat

Author

Rajat Malik

Full-stack developer | Open Source Contributor | Passionate about creating developer-friendly tools and libraries.

• Website: rajatmalik.dev
• Email: mr.rajatmalik@gmail.com
• LinkedIn: Connect with me
• GitHub: @malikrajat
• npm: rajatmalik

---

Built with care for the Angular community

Star on GitHub • View on npm • Report Issue • Try Demo

Made with dedication by Rajat Malik