Creating an Angular / Ionic rating component

Social sharing has become an essential part of any app or website‘s community building ,brand marketing and user engagement. In a recent post I shared how to add social sharing in your ionic apps to allow users to share useful content in your apps to friends on other platforms .

EASY SOCIAL-SHARING WITH IONIC 3 AND IONIC-NATIVE

Today I’ll be sharing how to make an easy star-rating component for your angular PWA or ionic app. Rating systems are great if you have a content based website ,this ranges anywhere from a video streaming site like Youtube or Vimeo to a blogging platform like Medium , as long as your app has content that a user needs to consume. Rating systems help boost user engagement within your app in the following ways :

1. Users are more likely to consume content if it has been reviewed by others ,rating systems help users filter through your app and find richer content quicker, improving their experience.
2. Users who review your content(i.e rating it) ,tend to feel more attached to your platform as they have invested time. Encourage your users to review content makes them feel like they are apart of a community and brings better engagement.
3. Getting users to review content gives you the added edge of knowing what your users like and dislike. This allows you to filter out the bad content and keeping adding more of the good stuff 😉.

Alright , enough chat , let’s get coding !

Firstly make sure you have npm and ionic installed and dash over to your terminal and create a new ionic command.

ionic start rating-system blank

We’ll be coding the rating component as a stand alone component that you can re-use through your coding, you head back to the terminal and create a new component using the ionic cli.

ionic generate component rating

This command will create a component named rating that we can insert anywhere in our app. To make our component as easy to use as possible ,we need to add some angular sugary goodness known as two way data binding. This enables us to us our component like this.

rating component

Basically it means we can pass angular a value for the rating and when the user selects a new rating this value will automatically be changed and vice versa (sweet right 😎 !).

Alright ,to implement this firstly find the rating.html file in the components folder under the rating component ‘s file. Let’s edit the file to include the following changes.

rating.html

Yep ,folks its that easy , no messy huge boilerplate of code, let’s let angular do the heavy lifting for us. Firstly we have a div , with 5 star icons ,this is done using the *ngFor directive which allows us to repeat an element for a specified number of times. When we click the any of the star icons , a function called rate is called ,passing the rating(index of the star ) as an argument. Finally we use ngStyle to dynamically style our star (give them different colors) based on the rating the user provides.The final product should look like this .

If for any reason you don’t feel like using the ion-icons ,which are icons provided by default with ionic ,you can you the version below which uses an SVG image instead. It has the same output as the above snippet , but doesn’t force you to use ionic’s icon pack ,just incase your in an Angular project 😉 .

To actually ,get this to work though we have to implement this functionality in our typescript file , so head over to your rating.ts and add the following bolierplate code .

rating.ts

So we still haven’t implemented our methods but I thought it would be great to go over every aspect step by step. In our main.ts we have two varibales :

1. rating — This variable store our rating as a number , the @Input decorator specifies that this value wi passed from the parent (Two way binding).
2. ratingChange — This variable is an EventEmitter<number> ,basically what that means is it emits an Event with a number in it. The @Output decorator specifies that we use this EventEmitter to output events to the parent. We will be using it to notify the parent every-time the rating changes.

Our main.ts also has 3 function ,which have been commented to elaborate their purpose.

THE RATE FUNCTION

The rate function is really simple , all we are doing is changing the value of our rating , and emitting this change so that the parent is notified.

IsAboveRating Function

This is another simple function , all we do is return a boolean value representing whether the value passed in is greater than our rating or not.

getColor Function

Unlike the last two , this function is bit tricky. As I previously alluded to in the comments , this function be responsible for our stars’ colors n the following way:

i)A rating of 1–2 stars will be colored red .

ii)A rating of 3 stars will be colored yellow.

iii) A rating of 4–5 stars will be colored green.

To make this easier lets include an enum with colors to use .(This file should be placed outside your class but in the same main.ts file.

Now that we have clarified our colors , we can go ahead an code our function.

Now let’s break down our function , firstly if the index of that star is greater than our rating we simply color it grey , as its irrelevant to our current rating. If its equal or below or rating then we assigned it a color based on our aforementioned coloring scheme using a switch case.