How to implement rating in ionic 3? - ionic-framework

Question

How do I create 5 star rating in ionic 3, I visited https://github.com/andrucz/ionic2-rating but it is not working. Also read some tutorial but not found anything clean and clear for ionic 3.
Just for clear, I want to get rating value and display rating.
Any help would be appreciated.
Thankyou

Answer 1

Demo: https://stackblitz.com/edit/ionic3-star-rating
Use github.com/melwinVincent/ionic3-star-rating npm package.
Step 1. Add the ionic3-star-rating component in your page (parent component) as follows
<ionic3-star-rating
activeIcon = "ios-star"
defaultIcon = "ios-star-outline"
activeColor = "#488aff"
defaultColor = "#f4f4f4"
readonly="false"
[rating]="3">
</ionic3-star-rating>
Step 2.
You have to import the StarRatingModule in the module.ts of your parent component as follows
import { NgModule } from '#angular/core';
import { IonicPageModule } from 'ionic-angular';
import { ParentPage } from './parent';
import { StarRatingModule } from 'ionic3-star-rating';
#NgModule({
declarations: [
ParentPage,
],
imports: [
StarRatingModule,
IonicPageModule.forChild(ParentPage),
],
})
export class ParentPageModule {}
Step 3.
To get the changed rating in the parent component,
You need to use events from ionic package.
import { Component } from '#angular/core';
import { NavController } from 'ionic-angular';
import { Events } from 'ionic-angular';
#Component({
selector: 'page-about',
templateUrl: 'about.html'
})
export class AboutPage {
constructor(public navCtrl: NavController,
public events: Events) {
events.subscribe('star-rating:changed', (starRating) => {console.log(starRating)});
}
}