ng-star-rate

For now, one component is added in this library

<lib-star-rate 
    [selctedColor]="selectColor"
    [star]="item"
    [maxRating]="maxRating"
    [showRatingCounter]="showRatingCounter"
    (ratingSelection)="selectedRating($event)">
</lib-star-rate>

How to use?

• Include our StarRateModule module in app.module.ts

import { StarRateModule } from 'ng-star-rate';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    StarRateModule //<-- add the module in imports
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

• Add the component <lib-star-rate> where rating part is expected in your application

To briefly explain what is role of input and output in the components as below

1. [star] - pass the rating number to the app i.e. - If rating has to be pre-selected. star - hold the default value of rating. | type: number
2. [maxRating] - pass the maximum rating stars needs to be rendered by that component. | type: number
3. [showRatingCounter] - this boolean value is to decide whether to show the rating value on the screen like 2 out of 5 | type: boolean
4. (ratingSelection) - This callback will be triggered when user selects the rating in the component.

Sample implementation

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { StarRateModule } from 'ng-star-rate';

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

app.component.html

<div class="center-align">
  <h1>
    Let's rate it!
  </h1>
    <lib-star-rate
      [selctedColor]="selectColor"
      [star]="item"
      [maxRating]="maxRating"
      [showRatingCounter]="showRatingCounter"
      (ratingSelection)="selectedRating($event)">
    </lib-star-rate>
  <h1 *ngIf="myRating">
    Rated to {{myRating}}
  </h1>
</div>

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {  
  selectColor = 'green';
  item = 0;
  maxRating = 5;
  showRatingCounter = true;
  myRating: number;

  selectedRating(rate: number) {
    console.log('your rating is--', rate);
    this.myRating = rate;
  }
}

Thank you.