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:
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();
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.
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).
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.