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

1. Create an app called ratingApp
2. Install cordova plugin called ionic4-star-ratinfg
3. Import starRatingModule in the home.module.ts
4. Modify home.page.html to display rating
5. Modify home.page.scss to style the home.html page
6. Modify home.page.ts to reflect click event
7. 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!!!!

1. Create an app called ratingApp

open you Command Line Interface (CLI) and create an app called ratingApp with following command

• 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

–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

• 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

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

• 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

• 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

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

Finally, home.page.ts will look like the code below

• Test the app.

Open the CLI again, issue the same command from step 1