``markdown


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

$3

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

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

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

$3

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

`html

`

$3

`html

Rate this product

Your rating: {{ ratingValue }}

`

$3

- 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:

`html

`

$3

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

`html

`

- 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.

`html

`

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:

`html

`

API

$3

- 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.

$3

- 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

`html



Product Rating

Your rating: {{ ratingValue }}

`

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

`typescript
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.

---

$3

- 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.

``