A very simple 5 star rating example

I thought I would post my example of how to do a 5 star rating system using the Alert controller: The following is the end result:

rating1

The alert code to generate the rating shown above: (note:the alert is part of a promise so all I do is revolve that promise with the value of the star pressed.)

        const alert = this.alertCtrl.create({
               title: 'Rate your speech:',
               subTitle: bleu,
               cssClass: 'alertstar',
               enableBackdropDismiss:false,
               buttons: [
                    { text: '1', handler: data => { this.resolveRec(1);}},
                    { text: '2', handler: data => { this.resolveRec(2);}},
                    { text: '3', handler: data => { this.resolveRec(3);}},
                    { text: '4', handler: data => { this.resolveRec(4);}},
                    { text: '5', handler: data => { this.resolveRec(5);}}
               ]
          });
          alert.present();

The CSS code for the above which is in app.scss

.alertstar{
     button{
          width: 40px;
          margin: 0 !important;
          background-image:url('../assets/icon/star.png');
          background-repeat: no-repeat;
          background-position: center;
          color:white !important;
     }
     .alert-button-group{padding:0; margin-top: 10px; flex-direction: row; justify-content: space-around;}
     border-radius: 12px;
     .alert-wrapper{border-radius: 12px;}
}

And finally the image of the star which is kept in assets/icon folder
star

4 Likes

If you want something a bit more sophisticated, you could assign each icon like
<ion-icon [name]="name(i)">
where i ranges from 1 to 5 or however many stars you need. And then the name is ios-star, ios-star-outline, or ios-star-half.

That’s the way I built mine anyway. I can’t share the code, but if you play around a bit I’m sure you can get something at least as good as I did.

css not woriking.
just show the number.
image is save in assest/icon/star.png
image

Have you put the CSS code in app.scss and referenced it in the alert cssClass: ‘alertstar’,?
The CSS code is required in app.scss (it won’t work in the page css).

.alertstar{
button{
width: 40px;
margin: 0 !important;
background-image:url(‘…/assets/icon/star.png’);
background-repeat: no-repeat;
background-position: center;
color:white !important;
}
.alert-button-group{padding:0; margin-top: 10px; flex-direction: row; justify-content: space-around;}
border-radius: 12px;
.alert-wrapper{border-radius: 12px;}
}

I used a slightly modified version of:

14

55

1 Like

no i wasn’t
it worked after i put css in app.scss, thank you

1 just put .alertstart{…} in home.scss
and in home.ts i used

const alert = this.alertCtrl.create({
      cssClass: 'alertstar',
...
      buttons: [
          { text: '1', handler: data => { this.resolveRec(1);}},
...
    alert.present();

what is difference between app.scss and page.scss?

thank you robinyo, it’s ionic2,
what about ionic 3?

Yes, it will work with Ionic 3.

npm install --save ionic2-rating

i got warning:
Preformatted text`npm WARN @ionic-native/camera@4.5.3 requires a peer of @ionic-native/core@^4.2.0
but none is installed. You must install peer dependencies yourself.


so i have to install them manualy ?

Think of app.scss as global over all the app where as the page.scss is restricted to just the page in question.
I know it does not make any sense but Ionic look for the custom cssClass in the app.scss file only.

See: https://robferguson.org/blog/2017/11/12/theming-your-ionic-3-app/

1 Like

Check the version of @ionic-native/core in your package.json

it’s last version, i found some plugin to manage plugin depedency, but i forgote the name of that plugin :smiley:


    "@ionic-native/camera": "^4.5.3",
    "@ionic-native/core": "4.7.0",

Try:

npm install @ionic-native/core@4.2.0
npm install @ionic-native/camera@4.5.3

after one try to do it, i have some problem in existing ionic project.

ionic serve

Cannot find module ‘@angular/forms’.
Cannot find module ‘@ionic-native/status-bar’.
Cannot find module ‘@ionic-native/splash-screen’.
Cannot find module ‘@angular/core’.
Cannot find module ‘@angular/platform-browser-dynamic’.
Cannot find module ‘@ionic-native/status-bar’.

:face_with_raised_eyebrow:

Delete your node_modules folder and then run:

npm install

Then:

ionic serve

thank you, it working now.

Im using ionic 3 where should i use “this.resolveRec(1)”??
Thanks in Advance

It is just a function called within the code - you can put whatever you want in there.

thanks it worked :slight_smile:

hi, i have tried this 5 star rating, in android it looks great. But in ios the stars put in groups of two and the fifth one in the end alone