Remove heart icon

Ionic Framework ionic-v3
1

Hello friends,
I am building a small quiz app.
I have these three heart (life) icons
<ion-icon name="heart" style="display: inline; color: red; "></ion-icon> <ion-icon name="heart" style="display: inline; color: red;"></ion-icon> <ion-icon name="heart" style="display: inline; color: red; "></ion-icon>
When a user answer wrong answer, one of the heart icon will drop or reduce.

I did this function, it works fine.

checkValue(value: boolean) {
      if (this.current_question.getValue() == value) {
          this.answer_text = "Correct Answer";
          this.display_content = false;
          this.score++;
      } else {
          this.answer_text = "Wrong Answer";
          this.display_content = false;

      }
  }

and the buttons

<button id="true" ion-button color="secondary" round class="fancyButton" style="position: absolute; left: 0;" (click)="checkValue(true)">True</button>
                <button id="false" ion-button color="secondary" round class="fancyButton" style="position: absolute; right: 0; background-color: red" (click)="checkValue(false)">True</button>

So how can drop or reduced the heart(life) icon when the user answer the wrong answer?
Someone can help me please?
Thanks

2

There are a bunch of star rating components for Angular out there. Study how they work. Also, get rid of all the inline styles and pull the styling information into separate sheets: it will make both your templates and your styling more readable and maintainable.

1 Like
3

See: Star Ratings in Ionic 2 - #36 by robinyo

1 Like