ng-ratings

ng-ratings is a standalone, reusable and customizable component for Angular 18, 19 and 20.

It is designed to work with signals and Angular zoneless, providing a lightweight, flexible, and accessible rating component. It is also fully compatible with SSR, CSR and prerender.

If you want to install the latest version (currently 20):

    npm install ng-ratings
  

Angular 19:

    npm install ng-ratings@v19-lts
  

Angular 18:

    npm install ng-ratings@v18-lts
  

Using ng-ratings is easy:

• Set the average you want to show at (average) input and/or able the component to generate votes using the [readOnly] input (you will get the vote value through (vote) output) .
• Configure its type, icon, hover behavior and accessibility using inputs.
• Style it with customizable CSS variables to match your design needs.

Here’s a basic usage example:

    import { Component, signal } from '@angular/core';
import { NgRatings } from 'ng-ratings';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [NgRatings],
  template: `
    <ng-ratings
      [average]="3.4"
      [items]="7"
      icon="heart"
      [readOnly]="false"
      [hover]="['translateY', 'scale']"
    />
  `
})
export class App {}
  

First of all, the [items] input specifies the total number of selectable units in the rating component. For example, if you choose [items]="3", you will have a rating of three stars/hearts.

With the [average] input, you can provide the value that the component should display as the current rating. The icons will be filled according to this value.

readOnly

The component supports two usage modes: one for displaying an average value, and another that also allows the user to submit a rating.

When [readOnly]="false", the component becomes eminteractive. Users can move their pointer or focus with the keyboard to select a rating, and when they click or press Enter, the component emits the selected value through the (vote) output.

readOnly is false by default. If you only intend to use the component to display averages, you can enable the read-only mode by setting readOnly to true.

Here is a list of all input/ouput:

Functionality Inputs

Functionality Output

Style & Behavior Inputs

Accessibility Inputs

You can easily customize the component’s appearance using the CSS variables listed below.

    ng-ratings{
  max-height: 35px;
  --rating-filled-color: blue;
  --rating-stroke-width: .4;
  --rating-empty-color: white;
}
  

This component includes five default languages (en, es, it, fr, de). When you choose one using the lang input, all accessibility settings are configured in that language, so you don't have to do anything else.

*** We recommend using the lang input if you don't need any other languages than the ones provided by default. It's simple and compliant with WAI-ARIA standards. ***

If you want to set up your own custom aria attributes, you should use the RatingCustomAria interface. You can import it directly from the component:

    import { RatingCustomAria } from 'ng-ratings';
  

    export interface RatingCustomAria {
  containerReadOnlyAriaLabel?: string;
  containerInteractiveAriaLabel?: string;
  buttonInteractiveAriaLabel?: (value: number, total: number) => string;
};
  

Here you can see a description of every field in RatingCustomAria interface. Every field is type string (except buttonInteractiveAriaLabel) and non-required

    import { NgRatings, RatingCustomAria } from 'ng-ratings';

@Component({
  imports: [NgRatings],
  template: `
    <ng-ratings
      [items]="4"
      [average]="2.5"
      [customAria]="accOpts()"
    />
  `
})
class App {
  accOpts = signal<RatingCustomAria>({
    containerInteractiveAriaLabel: 'CUSTOM - Average rating',
    buttonInteractiveAriaLabel: (value, total) =>
        'CHANGED - Select ' + value + 'of ' + total
  });
}