How to Implement rating star using ionic

Question

I am working on mobile application using Ionic framework, trying to implement rating star in my feedback question. I need to:

1. show the questions with rating star
2. send the number of selected stars to backend using ajax to save in database

Ex:

{question1: 3, question2: 4, question3: 2}

So far i tried: Installed the ionic-ratings plugin & called in my index Reference link: https://market.ionic.io/plugins/ionicratings

Its showing each questions with 5 stars. This is my content

<ion-content>
<div class="card"  ng-repeat='item in fquestions'>
  <div class="item item-text-wrap">
    <h2>Q: {{item.feedback_question}}</h2>
    <p style="font-size:30px;"><ionic-ratings ratingsobj='ratingsObject'></ionic-ratings></p>
  </div>
</div>
</ion-content>

Answer 1

For better control you can build your own star rating component. Here is an easy solution.

your.page.html

  <ion-item>
    <ion-label position="stacked">Your Rating</ion-label>
    <ion-buttons>
      <ng-container *ngFor="let i of [1,2,3,4,5]">
        <ion-button (click)="starClicked(i)">
          <ion-icon slot="icon-only" *ngIf="i<=stars" name="star">
          </ion-icon>
          <ion-icon slot="icon-only" *ngIf="i>stars" name="star-outline">
          </ion-icon>
        </ion-button>
      </ng-container>
    </ion-buttons>
  </ion-item>

your.page.ts

...

export class FeedbackPage implements OnInit {
    ...
    stars:number;

    constructor(){
       this.stars=0;
    }
    starClicked(i:number){
        this.stars=i;
    }
}

Answer 2

Ionic 5 star rating display for React:

{/* filled star for given rating */}
{[...Array(review.rating).keys()].map(() => {
    return <IonIcon icon={star} color="warning" />;
})}

{/* empty star */}
{[...Array(5 - review.rating).keys()].map(() => {
    return <IonIcon icon={starOutline} color="warning" />;
})}

Answer 3

page.html

 <div>
   <ion-icon color="primary" *ngFor="let item of list;let i = index" [name]="condition <= i? 'star-outline' :'star' "
  (click)="review(i)">
   </ion-icon>
 </div>

page.ts

condition: number = 0;
list: any[] = new Array(5);

review(i) {
   this.condition = i + 1;
   // your code........
}

Answer 4

No need to add any extra package in json actually we can implement simple star rating on our own

<div *ngIf="rate==0">
    <ion-icon color="primary" name="star-outline" (click)="onRate(1)"></ion-icon>
    <ion-icon color="primary" name="star-outline" (click)="onRate(2)"></ion-icon>
    <ion-icon color="primary" name="star-outline" (click)="onRate(3)"></ion-icon>
    <ion-icon color="primary" name="star-outline" (click)="onRate(4)"></ion-icon>
    <ion-icon color="primary" name="star-outline" (click)="onRate(5)"></ion-icon>
  </div>
  <div *ngIf="rate==1">
    <ion-icon color="primary" name="star" (click)="onRate(1)"></ion-icon>
    <ion-icon color="primary" name="star-outline" (click)="onRate(2)"></ion-icon>
    <ion-icon color="primary" name="star-outline" (click)="onRate(3)"></ion-icon>
    <ion-icon color="primary" name="star-outline" (click)="onRate(4)"></ion-icon>
    <ion-icon color="primary" name="star-outline" (click)="onRate(5)"></ion-icon>
  </div>
  <div *ngIf="rate==2">
    <ion-icon color="primary" name="star" (click)="onRate(1)"></ion-icon>
    <ion-icon color="primary" name="star" (click)="onRate(2)"></ion-icon>
    <ion-icon color="primary" name="star-outline" (click)="onRate(3)"></ion-icon>
    <ion-icon color="primary" name="star-outline" (click)="onRate(4)"></ion-icon>
    <ion-icon color="primary" name="star-outline" (click)="onRate(5)"></ion-icon>
  </div>

  <div *ngIf="rate==3">
    <ion-icon color="primary" name="star" (click)="onRate(1)"></ion-icon>
    <ion-icon color="primary" name="star" (click)="onRate(2)"></ion-icon>
    <ion-icon color="primary" name="star" (click)="onRate(3)"></ion-icon>
    <ion-icon color="primary" name="star-outline" (click)="onRate(4)"></ion-icon>
    <ion-icon color="primary" name="star-outline" (click)="onRate(5)"></ion-icon>
  </div>
  <div *ngIf="rate==4">
    <ion-icon color="primary" name="star" (click)="onRate(1)"></ion-icon>
    <ion-icon color="primary" name="star" (click)="onRate(2)"></ion-icon>
    <ion-icon color="primary" name="star" (click)="onRate(3)"></ion-icon>
    <ion-icon color="primary" name="star" (click)="onRate(4)"></ion-icon>
    <ion-icon color="primary" name="star-outline" (click)="onRate(5)"></ion-icon>
  </div>
  <div *ngIf="rate==5">
    <ion-icon color="primary" name="star" (click)="onRate(1)"></ion-icon>
    <ion-icon color="primary" name="star" (click)="onRate(2)"></ion-icon>
    <ion-icon color="primary" name="star" (click)="onRate(3)"></ion-icon>
    <ion-icon color="primary" name="star" (click)="onRate(4)"></ion-icon>
    <ion-icon color="primary" name="star" (click)="onRate(5)"></ion-icon>
  </div>

in .ts file

rate=0;
onRate(rate) {
    console.log(rate)
    this.rate = rate;
  }

Answer 5

You can use https://github.com/fraserxu/ionic-rating for Ionic 1 apps and https://github.com/andrucz/ionic2-rating for Ionic 2 apps.

Answer 6

I use it to make a rating star ( there is no Ajax inside, I let you this part ) : in your html :

<ion-content ng-controller="AppCtrl">
          <div class="padding text-center">
        <h3>Rate the App</h3>
        <div>
          <a href="javascript:" ng-repeat="r in ratingArr" class="padding" style="text-decoration:none;">
            <i class="icon {{r.icon}}" ng-click="setRating(r.question,r.value)"></i>
          </a>
        </div>
      </div>
      </ion-content>

and into your controller :

$scope.ratingArr = [{
    value: 1,
    icon: 'ion-ios-star-outline',
    question: 1
  }, {
    value: 2,
    icon: 'ion-ios-star-outline',
    question: 2
  }, {
    value: 3,
    icon: 'ion-ios-star-outline',
    question: 3
  }, {
    value: 4,
    icon: 'ion-ios-star-outline',
    question: 1
  }, {
    value: 5,
    icon: 'ion-ios-star-outline',
    question: 'question 5'
  }];

  $scope.setRating = function(question,val) {
    var rtgs = $scope.ratingArr;
    for (var i = 0; i < rtgs.length; i++) {
      if (i < val) {
        rtgs[i].icon = 'ion-ios-star';
      } else {
        rtgs[i].icon = 'ion-ios-star-outline';
      }
    };
    alert(question);
  }