Ngx Stars Rating Module

Overview

Ngx Stars Rating is a straightforward Angular module designed for Angular 14 and above. It offers customizable star icons using Material Icons, Antd Icons, and other options.

Demo

Explore the live demo here.

Installation

Ensure you have Angular 13 or a later version installed.

To install the ngx-stars-rating module via npm, navigate to your project directory and run:

cd project_folder
npm install --save ngx-stars-rating

Usage

1. Import the NgxStarsRatingModule into your Angular module:

import { NgxStarsRatingModule } from 'ngx-stars-rating';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, NgxStarsRatingModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

2. Add the <ngx-stars-rating> component to your HTML file:

<!-- app.component.html -->
<ngx-stars-rating></ngx-stars-rating>

3. Optionally, configure the rating by providing input properties such as rate, options, and handling events such as (onRate):

<ngx-stars-rating
  [rate]="rateNumber"
  [options]="ratingOptions"
  (onRate)="onClickRate($event)"
  [starTemplate]="starCustomTemplate"
></ngx-stars-rating>

import { IRatingOptions } from 'ngx-stars-rating';

export class AppComponent {
    public rateNumber: number = 4.7;
    public ratingOptions: IRatingOptions = {
        starsCount: 5,
        hoverable: true,
        clickable: true
    };

    public onClickRate(rate: number): void {
        console.log(rate, 'rate'); // Logs the clicked star number
    }
}

4. Customize stars using templates:

<ng-template #starCustomTemplate>
  <span class="material-symbols-outlined" style="font-size: 55px">star</span>
</ng-template>

Future Updates

In future versions, support for Forms and ReactiveForms (ngModel and formControl/formControlName) directives will be added.