How can i use ion-icon into rating component

Ionic Framework ionic-v3
1

hi guys,
i write a little rating component and its works pretty fine , but i’m using bootstrap css
how can i use ion-icon into this?

my component look like this

@Component({
  selector: 'rating',
  inputs: ['rate'],
  outputs: ['updateRate: rateChange'],
  template:  `
    <span tabindex="0">
      <template ngFor #range [ngForOf]="range" #index="index">
        <span class="sr-only">({{ index < rate ? '*' : ' ' }})</span>
        <i style="font-size: 50px;" gold class="glyphicon" (click)="update(index + 1)" [ngClass]="index < rate ? 'glyphicon-star' : 'glyphicon-star-empty'"></i>
      </template>
    </span>
  `
})

image
Screenshot_21.png378×668 8.47 KB

2

Would something like this work?

<ion-icon [name]="index < rate ? 'star' : 'star-outline'"></ion-icon>
3 Likes
3

getting template parse errors:
Parser Error: Conditional expression ‘star’ ? ‘star-outline’ requires all 3 expressions at the end of the expression

4

Sorry, edited my post to fix typo in ?: operator. I had two '?'s.

5

many thanks but rating doesnt show up

6

Just for information, I created an ionic 2 rating component: https://github.com/andrucz/ionic2-rating

1 Like