rm-ng-star-rating
July 21, 2026 · View on GitHub
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, signal } from '@angular/core';
import { RmNgStarRatingComponent } from 'rm-ng-star-rating';
@Component({
selector: 'app-example',
imports: [RmNgStarRatingComponent],
template: `
<rm-ng-star-rating
[rating]="rating()"
[starCount]="5"
[color]="'red'"
[size]="'40px'"
[emptyColor]="'lightgray'"
[readOnly]="false"
(ratingUpdated)="onRatingUpdated($event)"
></rm-ng-star-rating>
`
})
export class ExampleComponent {
protected readonly rating = signal(3.5);
onRatingUpdated(newRating: number) {
console.log('New Rating:', newRating);
this.rating.set(newRating);
}
}
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
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.
Changelog
See CHANGELOG.md for release history and updates.
Browser Compatibility
Supported Browsers
| Browser | Version | Support Level | Notes |
|---|---|---|---|
| Chrome | 80+ | Full Support | Recommended browser |
| Firefox | 75+ | Full Support | Works perfectly |
| Safari | 13+ | Full Support | iOS and macOS |
| Edge | 80+ | Full Support | Chromium-based |
| Opera | 67+ | Full Support | Works well |
| Samsung Internet | 12+ | Full Support | Mobile support |
Mobile Support
- iOS Safari 13+
- Chrome for Android 80+
- Samsung Internet
- All mobile browsers with modern JavaScript support
Download Behavior by Platform
| Platform | Behavior |
|---|---|
| Desktop Chrome/Firefox/Edge | Direct download to Downloads folder |
| Desktop Safari | May prompt for download location |
| iOS Safari | Opens download manager |
| Android Chrome | Downloads to Downloads folder |
| Mobile Safari | Shows share sheet with save option |
Not Supported
- Internet Explorer (all old versions)
- Very old mobile browsers (pre-2019)
Statistics
Support This Project
If rm-ng-star-rating has helped you build better Angular applications, please consider:
If this library has saved you development time and helped create amazing image sliders in your projects, please consider giving it a star!
Why star this repo?
- Help other developers discover this lightweight, optimized solution
- Support continued development and improvements
- Show appreciation for free, quality tools
- Boost visibility in the Angular community
Want More Quality Libraries?
This is just one of several useful libraries I've created. Explore my other Angular & web development libraries that might solve your next challenge:
- Utility libraries for common development tasks
- UI components for better user experiences
- Performance tools for optimization
- Mobile-friendly solutions for responsive apps
Found them helpful? A star on each repo you find useful helps tremendously! It takes just one click but means the world to open-source maintainers.
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 |
| mr.rajatmalik@gmail.com | Direct support |
Documentation
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
Statistics
Acknowledgements
This library was inspired by the need for a lightweight, modern solution for Angular applications. Special thanks to the Angular community for their feedback and contributions.
- 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!
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 | |
| @codewithrajat/rm-ng-typeahead | Angular autocomplete/typeahead component with search suggestions and keyboard navigation |  |
| @codewithrajat/rm-ng-editor | Rich text editor component for Angular applications with customizable toolbar support | |
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 |  |
| @codewithrajat/rm-ng-pdf-viewer | Angular PDF viewer component with zoom, navigation, and document rendering support | |
Chrome Extension
| Library | Description | Link |
|---|---|---|
| quickocr | Chrome extension that extracts text from images using OCR technology | |
| readLoude | Chrome extension that read you web page loude e.g article etc. | |
| ai-assistant-reply | AI Chrome extension to auto generate reply on linked in posts. | |
VS Code Extension
| Library | Description | Link |
|---|---|---|
| dead-css-cleaner | VS Code extension for identifying and cleaning unused CSS styles | |
| file-coverage-insight | VS Code extension for auto generated component file coverage automatelly on open. | |
Desktop Applications - All Plateform
| Library | Description | Link |
|---|---|---|
| deepwork | Cross-platform productivity application for focus sessions and deep work tracking | |
| JsSandbox | Cross-platform JavaScript playground and code execution environment | |
Device Detection
| Library | Description | npm Link |
|---|---|---|
| rm-ng-device-detection | Detect device type, OS, and browser in Angular |  |
Notifications
| Library | Description | npm Link |
|---|---|---|
| rm-pushnotify | Lightweight push-style toast notification utility |  |
| @codewithrajat/rm-toast-notification | Cross-platform toast and desktop notification library for web, Angular, and desktop applications | |
Layout & Dynamic Rendering
| Library | Description | Link |
|---|---|---|
| rm-ng-dynamic-layout | Dynamic layout rendering engine for Angular applications using JSON-driven UI configuration | |
Developer Tools & Extensions
| Library | Description | Link |
|---|---|---|
| rm-colorful-console-logger | Structured and colorized console logging utility for developers |  |
Meta & Personal Branding
| Library | Description | npm Link |
|---|---|---|
| about-rajat | Developer portfolio package for branding and quick personal info |  |
All Packages
Browse all my packages:
Author
Rajat Malik
Full‑Stack Developer and Frontend Architect at Siemens with 14+ years building scalable enterprise platforms, specializing in micro‑frontends, AI‑native development, React, and Angular.
Author of 10+ open‑source libraries and 100+ technical articles, driving innovation through developer‑friendly tools, performance optimization, and AI‑assisted workflows.
GET IN TOUCH
- Portfolio: rajatmalik.dev
- Email: mr.rajatmalik@gmail.com
- LinkedIn: errajatmalik
- GitHub: @malikrajat
- npm: rajatmalik
SOCIAL PRESENCE
- Threads: rajatmalik
- Twitter/X: rajatmalik
- BlueSky: rajatmalik
CONTENT & WRITING
- Medium: rajatmalik
- Dev.to: rajatmalik
- Substack: rajatmalik
- Hashnode: rajatmalik
Made with care and love by Rajat Malik for the Angular community
Star on GitHub • View on npm • Report Issue •
Made with dedication by Rajat Malik