@khajegan/ng-star-rating v14.0.4

ng-starrating

Suitable for Angular 14.2.6

Simple, highly Customizable and Responsive Star Rating Library built using Angular.

For production, use the files from the dist/ folder.

Demo

Edge browser support: Import webcomponents bundle for Edge browser

<script src="https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs@2.4.1/webcomponents-bundle.min.js"></script>

Why it's better

• Simple and customizable
• Light weight. Built using CSS only
• Responsive
• Parameterized total number of stars

Installation

Use one of the following methods to add the Star Rating library to your project:

• Download ZIP
• npm install ng-starrating

Usage

//app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RatingModule } from 'ng-starrating';
import { AppComponent } from './app.component';

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

<div style="text-align:center">
  <h1>
    ng-starrating demo
  </h1>
  <star-rating value="5" totalstars="5" checkedcolor="red" uncheckedcolor="black" size="24px" readonly="false" (rate)="onRate($event)"></star-rating>
</div>

//app.components.ts
import { Component } from '@angular/core';
import { StarRatingComponent } from 'ng-starrating';

@Component({ 
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  constructor() { }

  ngOnInit() { }

  onRate($event:{oldValue:number, newValue:number, starRating:StarRatingComponent}) {
    alert(`Old Value:${$event.oldValue}, 
      New Value: ${$event.newValue}, 
      Checked Color: ${$event.starRating.checkedcolor}, 
      Unchecked Color: ${$event.starRating.uncheckedcolor}`);
  }
}

Options

Here are the default options

checkedcolor: "gold",
uncheckedcolor: "gray",
size: "24px",
value: 0,
readonly: false,
totalstars: 5

totalstars:

Type: Number

Adds the number of stars. Default value is 5

checkedcolor:

Type: String

Checked color for the star. Default color is "gold". You can even use color codes.

uncheckedcolor:

Type: String

Un-checked color for the star. Default color is "gray". You can even use color codes.

size:

Type: String

Size of the Stars in pixels. Default size is 24px.

value:

Type: Number

Value of the Star Rating. Default value is 0. It can be between 0 to 5. It also supports half rating.

readonly:

Type: Boolean

Determines whether the star rating component is readonly.

Events

rate:

Type: EventEmitter

Custom Event, triggers on change of rating value.

Build

Star Rating uses npm to manage package dependencies.

Compatibility

• All modern browsers

Contributing

All changes should be committed to the files in src/.

Changelog

v14.0.1 - [2022-10-19]

• Upgrade Angular version to 14.2.6

License

MIT