In this tutorial we are going to learn how to implement rating in an ionic 4 application. Rating is a prolific and handy tool to get feedback from your customers and partners on your app, products, services, even staff. It could be design to come up immediate after a successful completion of products purchase or service delivery.
To achieve the task of the day, we need to take the following steps
- Create an app called ratingApp
- Install cordova plugin called ionic4-star-ratinfg
- Import starRatingModule in the home.module.ts
- Modify home.page.html to display rating
- Modify home.page.scss to style the home.html page
- Modify home.page.ts to reflect click event
- Test our app
With the above simple steps, you can achieve so much feature in you app that can give you insight into how well your products or services meets the need of your customer.
Now, let’s get started, are you ready!!!!
- Create an app called ratingApp
open you Command Line Interface (CLI) and create an app called ratingApp with following command
1 |
ionic start ratingApp blank |
- start will tell the CLI create a new app.
- ratingApp will be the directory name and the app name from your project.
- blank will be the starter template for your project.
Press enter key
You will be prompted to choose a framework for your project, choose angular and press enter key again as shown below

As usual, let’s run our app in the browser to ascertain it is alright, change directory to the newly create app name, that is, ratingApp and run the app with the following code using our CLI
1 |
cd ratingApp |
1 |
ionic serve –l |
–l in the syntax will run the app in lab mode.
At a point the system will recognize that ionic-lab has not been installed in the project and will prompt you for the installation as shown below.

Type yes and press return key
After the ionic-lab installation is completed, the application will be serve into your default browser as shown below.
- Install cordova plugin called ionic4-star-rating
Open you CLI, issue the following command to install plugin for ionic 4 start rating
1 |
npm i ionic4-star-rating |
- Import starRatingModule in the app.module.ts
Open your favourite code editor ( in my own case as usual, I use VS code) and open app.module.ts file, import StarRatingModule from ionic4-star-rating by inserting the following code in the app.module.ts file
1 |
import { AppRoutingModule } from './app-routing.module'; |
and include StarRatingModule in imports array as shown below
- Modify home.html to display rating
Open home.html and change the content of the file to the code below and save
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<ion-content> <ion-card class="center-text" > <ion-card-header> <ion-card-subtitle> My App</ion-card-subtitle> <ion-card-title>App Rating App</ion-card-title> </ion-card-header> <ion-card-content> <ionic4-star-rating [(ngModel)]="rate" max="5" emptyStarIconName="star-outline" halfStarIconName="star-half" starIconName="star" nullable="false" (ngModelChange)="onModelChange($event)"> <!--use it when you need to do something when user clicks on a star. in case you only need to change ngModel property, this property can be ommited.--> </ionic4-star-rating> <h2> Your rating is {{rating}} out of 5</h2> </ion-card-content> </ion-card> </ion-content> |
- Modify home.scss to style the home.html page
Open home.scss file, add the following code to the content of the file and save
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
ul { padding: 0px; &.rating li { padding: 5px 10px !important; background: none; color: #ffb400; ion-icon { font-size: 30px; } } } .center-text{ text-align: center; } |
- Modify home.ts to reflect click event
Open home.page.ts file create a class property called rating and assign it a null value as follows
1 |
public rating = ''; |
log the click event in the browser console and assign the value of the click event to the property declared early by add the following code
1 2 3 4 5 6 |
onModelChange($event){ console.log($event) this.rating = $event; } |
Finally, home.page.ts will look like the code below
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
import { Component } from '@angular/core'; @Component({ selector: 'app-home', templateUrl: 'home.page.html', styleUrls: ['home.page.scss'], }) export class HomePage { public rating = ''; constructor() {} onModelChange($event){ console.log($event) this.rating = $event; } } |
- Test the app.
Open the CLI again, issue the same command from step 1
1 |
ionic serve –l |
