Angular Ratify

This angular component library is planned to hold different sort of rating components needed for an angular application development.

For now, one component is added in this library

<lib-ratify 
[grade]="grade" 
[maxRating]="maxRating" [showRatingCounter]="showRatingCounter" (triggerRatingSelection)="selectedRating($event)"></lib-ratify>

How to use?

• Include our angular-ratify module in app.module.ts

import { RatifyModule } from 'angular-ratify';

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

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

To brief the signatures of the components as below

1. [grade] - pass the rating number to the app i.e. - If rating has to be pre-selected. grade - 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. (triggerRatingSelection) - 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 { RatifyModule } from 'angular-ratify';

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

app.component.html

<div style="text-align:center">
  <h1>
    Lets rate it!
  </h1>
  <lib-ratify [grade]="grade" [maxRating]="maxRating" [showRatingCounter]="showRatingCounter" (triggerRatingSelection)="selectedRating($event)"></lib-ratify>
  <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 {
  grade = 0;
  maxRating = 5;
  showRatingCounter = true;
  myRating: number;

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

Snapshots

• Initial rendering

  

• While user hovering on rating component

  

• Once, user rate

  

Thank you, give a try. Welcome!