@ionic-snippets/star-rating

A flexible and customizable star rating component for Angular applications with Ionic support.

Features

⭐ Multiple Icon Types: Support for stars, hearts, thumbs up, diamonds, squares, and circles
🎨 Customizable: Color, size, and styling options
📱 Mobile Optimized: Responsive design with touch-friendly interactions
🔧 Editable/Read-only: Toggle between interactive and display-only modes
📊 Rating Display: Optional rating text display
🚀 Angular Signals: Built with modern Angular signals for optimal performance
🎯 Ionic Integration: Seamless integration with Ionic components

Installation

npm install @ionic-snippets/star-rating

Usage

Basic Usage

import { StarRatingComponent } from '@ionic-snippets/star-rating';

@Component({
  selector: 'app-example',
  standalone: true,
  imports: [StarRatingComponent],
  template: `
    <star-rating 
      [rating]="3" 
      [maxRating]="5"
      (ratingChange)="onRatingChange($event)">
    </star-rating>
  `
})
export class ExampleComponent {
  onRatingChange(rating: number) {
    console.log('New rating:', rating);
  }
}

Advanced Usage

@Component({
  selector: 'app-advanced-example',
  standalone: true,
  imports: [StarRatingComponent],
  template: `
    <star-rating 
      [rating]="currentRating" 
      [maxRating]="10"
      [iconType]="'heart'"
      [size]="'large'"
      [color]="'#ff4081'"
      [emptyColor]="'#e0e0e0'"
      [editable]="true"
      [showRating]="true"
      (ratingChange)="onRatingChange($event)"
      (ratingClick)="onRatingClick($event)">
    </star-rating>
  `
})
export class AdvancedExampleComponent {
  currentRating = 7;

  onRatingChange(rating: number) {
    this.currentRating = rating;
  }

  onRatingClick(rating: number) {
    console.log('Rating clicked:', rating);
  }
}

API Reference

Input Properties

Property	Type	Default	Description
`rating`	`number`	`0`	Current rating value
`maxRating`	`number`	`5`	Maximum rating value
`iconType`	`'star' \| 'heart' \| 'thumbs-up' \| 'diamond' \| 'square' \| 'circle'`	`'star'`	Type of icon to display
`editable`	`boolean`	`true`	Whether the rating is editable
`size`	`'small' \| 'medium' \| 'large'`	`'medium'`	Size of the rating icons
`color`	`string`	`'#ffc107'`	Color of filled icons
`emptyColor`	`string`	`'#e0e0e0'`	Color of empty icons
`showRating`	`boolean`	`false`	Whether to show the rating text

Output Events

Event	Type	Description
`ratingChange`	`number`	Emitted when the rating value changes
`ratingClick`	`number`	Emitted when a rating icon is clicked

Icon Types

The component supports the following icon types:

star - Star icons (default)
heart - Heart icons
thumbs-up - Thumbs up icons
diamond - Diamond icons
square - Square icons
circle - Circle icons

Size Options

small - 16px icons
medium - 20px icons (default)
large - 24px icons

Dependencies

This component requires the following peer dependencies:

@angular/common ^20.0.0
@angular/core ^20.0.0
@ionic/angular ^8.0.0
ionicons ^7.0.0

Browser Support

Chrome (latest)
Firefox (latest)
Safari (latest)
Edge (latest)

License

MIT

Contributing

Fork the repository
Create your feature branch (git checkout -b feature/amazing-feature)
Commit your changes (git commit -m 'Add some amazing feature')
Push to the branch (git push origin feature/amazing-feature)
Open a Pull Request

Support

If you have any questions or need help, please open an issue on GitHub.