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 .

  1. 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.
  2. 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
ionic generate component rating
rating component
rating.html
rating.ts
  1. 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.

THE RATE FUNCTION

IsAboveRating Function

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:

Human