# ionic-rating-8

A simple Angular/Ionic rating component that allows users to rate items with a star-based interface.

## Features

- Easy to integrate with Angular and Ionic projects.
- Supports two-way data binding for dynamic rating values.
- Customizable design for font size, colors, and star icons.
- Event emitters for rating change and click events.

## Installation

To install the `ionic-rating-8` package, run the following command:

```bash
npm install ionic-rating-8

Usage

Import the RatingModule into your Angular module

In your Angular module (e.g., app.module.ts), import the RatingModule:

import { RatingModule } from 'ionic-rating-8';

@NgModule({
  imports: [RatingModule],
})
export class AppModule {}

Add the app-rating component to your template

You can now use the app-rating component in any of your templates. The component supports two-way binding for the rating value:

<app-rating [(rating)]="ratingValue"></app-rating>

Example:

<ion-content>
  <h2>Rate this product</h2>
  <app-rating [(rating)]="ratingValue" (ratingChange)="onRatingChange($event)"></app-rating>
  <p>Your rating: {{ ratingValue }}</p>
</ion-content>

Component Properties

• rating: The current rating value (number between 0 and 5). This can be used with two-way binding.
• ratingChange: Event emitter triggered when the rating is changed.
• ratingClicked: Event emitter triggered when a star is clicked.
• fontSize: Customize the font size of the stars (in pixels).

Example:

<app-rating [(rating)]="ratingValue" [fontSize]="25"></app-rating>

Available Events

• ratingChange: This event emits the updated rating value whenever the user changes the rating.

  <app-rating [(rating)]="ratingValue" (ratingChange)="onRatingChange($event)"></app-rating>

• ratingClicked: This event emits the rating value when a user clicks a star. You can use this event to trigger custom actions when the rating is clicked.

  <app-rating [(rating)]="ratingValue" (ratingClicked)="onRatingClicked($event)"></app-rating>

Customization

The component is highly customizable, and you can adjust its appearance by passing additional inputs.

• fontSize: Adjust the size of the rating stars.
• color: Change the color of the stars.

Example:

<app-rating [(rating)]="ratingValue" [fontSize]="30" [color]="'#FFCC00'"></app-rating>

API

Properties

• rating: number – The current rating value (0-5). You can bind it using two-way binding.
• fontSize: number – The size of the stars in pixels.
• color: string – The color of the stars, passed as a CSS color value.

Events

• ratingChange: Emitted when the rating is changed. It emits the updated rating value.
• ratingClicked: Emitted when a star is clicked. It emits the clicked rating value.

Example Code

<ion-header>
  <ion-toolbar>
    <ion-title>
      Product Rating
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <app-rating [(rating)]="ratingValue" [fontSize]="30" [color]="'#FFCC00'" (ratingChange)="onRatingChange($event)"></app-rating>
  <p>Your rating: {{ ratingValue }}</p>
</ion-content>

In the corresponding TypeScript file (e.g., home.page.ts):

import { Component } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  ratingValue: number = 0;

  onRatingChange(newRating: number) {
    console.log('New rating:', newRating);
  }
}

License

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

Troubleshooting

• If the component doesn't appear as expected, make sure that you've correctly imported the RatingModule in your app.module.ts file.
• Ensure that the rating value is a number and falls within the range of 0-5.

Contact

For any questions or issues, feel free to contact the author:

Author: AGA

Note: ionic-rating-8 is compatible with Angular 19 and Ionic 8.4.0. Make sure to check your project versions before using this component.