Simple ionic 3 star rating component

Ionic Framework ionic-v3
1

I just created a custom star rating component for my project.
You can specify the icons and colors and can get the changed value of rating in your parent component.
This works with Ionic2 & Ionic3

<ionic3-star-rating
activeIcon = “ios-star”
defaultIcon = “ios-star-outline”
activeColor = “#488aff”
defaultColor = “#f4f4f4”
readonly=“false”
[rating]=“3”>

Demo
image

npm link

github link

Happy Coding

2

Hello!
How to add multiple ratings at one page and handle each of them ?

3

Hi Fayozjon Berdiev,

Sorry for the late reply.

I will solve this issue and update the code ASAP.
Will update you once it is completed.

Thank you for using my component.

Regards,
Melwin Vincent C,

4

I have created a pull request which supports events binding per component & can be used as control in form. As it is not merged at the moment please check my fork https://github.com/emgie123/ionic3-star-rating

5

how to resize the rating star?

7

add custom css
class ul {
padding: 0px;
&.rating li {
padding: 0px 0px !important;
background: none;
color: #ffb400;
ion-icon {
font-size: 15px;
}
}
}

8

Hello!
Thank you for your component.

I’m encountering a problem…
The stars on mine are showing as only half stars. Any idea why?

image

1 Like
9

Hi, at IonicThemes we have an Ionic 4 Template which includes a rating component like the one in the following screenshot. Hope it helps :slight_smile:

image
image.png350×623 66.8 KB

10

that’s nice. too bad i’m still on 3.9 :frowning:

11

That’s not a problem, we also have that component for Ionic 3.9 in Ion2FullApp ELITE :wink:

1 Like
12

Hi thanks for your effect. Can we clear the star rating using reset button ?

13

Hi

I am having the same problem , was anyone able to fix this.

14

The package has been upgraded to support multiple usage of ionic3-star-rating component in the same parent page. Latest version supports the usage in component as well. You can also configure the font-size of the icons now.
Upgrade the component by running the command
npm install ionic3-star-rating@2.0.0

15

This feature has been included in the latest upgraded version.

Please upgraded to the latest version
npm install ionic3-star-rating@2.0.1

16

This feature has been included in the latest upgraded version.

Please upgraded to the latest version
npm install ionic3-star-rating@2.0.1

Use inside component and just make use reset() function of the FromGroup

17

Hello

Is it also possible to add half star support?

18

Hi @dimsal

This feature will be added in the next release.
Thank you.

19

Have you done with it ? Half star feature!

20

Yes , please update the plugin to the latest version.
npm install ionic3-star-rating@2.1.2
Read the docs to know how to implement half star rating

21

I’ve used this npm i ionic4-star-rating

I need to resolve this:

if i use rating for eg: 2.6 out of 5.Instead of showing 2 .6 portion of a star its showing 3 star (its rounding up the value after 2.5 is there is any way to change it? but its working fine on 2.4 its showing similar to 2.5