Skip to main content

Rating Component

This document outlines the specifications for the RatingComponent, an Angular component designed to allow users to rate items by selecting a numerical value from a predefined range.

Purpose​

The RatingComponent provides a user-friendly interface for users to assign ratings to items by selecting a numerical value within a specified range. It enhances user engagement and feedback mechanisms within applications by enabling users to express their opinions through ratings.

Usage​

Integrate the RatingComponent into your Angular applications to enable users to rate items by selecting a numerical value from a predefined range.

Inputs​

  1. maxValue: (Required) Specifies the maximum value in the rating scale.

  2. value: (Optional) The current rating value. Defaults to 0.

  3. readOnly: (Optional) Disables user interaction with the rating component if set to true.

  4. showText: (Optional) Displays the numerical value of the rating alongside the rating component if set to true.

  5. icon: (Optional) Specifies the icon to be used for the rating. Accepts CSS classes or SVG icons.

Events​

  1. valueChange: Fired when the rating value changes. Emits the new rating value.

Example​

<app-rating
  [maxValue]="5"
  [value]="currentRating"
  [readOnly]="false"
  [showText]="true"
  icon="fa fa-star"
  (valueChange)="onRatingChange($event)"
></app-rating>

Notes​

  • Customize the styling of the rating component and its icons to match the overall design aesthetics of your application.
  • Implement the valueChange event handler to respond to changes in the rating value.
  • Ensure that the maxValue input accurately reflects the maximum value in the rating scale to provide an appropriate range for users to select from.
// Example usage
currentRating: number = 3.5;

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