CODEWITHSUNDEEP
javascriptangularionic-frameworkionic2ionic3
user2828442
user2828442

Reputation: 2515

Change icon by selecting icon from list

Brief Explanation:

I have placed 1 icon on home.html and I have some a list of icons as well. I just want to replace the icon with the icon I choose from the list. Below is my home.html code

<ion-item>
<!--Replace below icon by selecting icon from below ion-list -->
        <i class="fa fa-battery-empty" style="color: red;"></i> Battery Level Empty
      </ion-item>

  <ion-list>
    <ion-item>
      <i class="fa fa-battery-empty" style="color: red;"></i> Battery Level Empty
    </ion-item>
    <ion-item>
      <i class="fa fa-battery-1"></i> Battery Level 1
    </ion-item>
    <ion-item>
      <i class="fa fa-battery-2"></i> Battery Level 2
    </ion-item>
    <ion-item>
      <i class="fa fa-battery-3"></i> Battery Level 3
    </ion-item>
    <ion-item>
      <i class="fa fa-battery-4" style="color: green;"></i> Battery Level 4
    </ion-item>
  </ion-list>

I have to use DOM sanitizer for some HTML dynamic operations, it will be ok if this needs JS/jQuery way on home.ts side.

Upvotes: 1

Views: 68

Answers (1)

Vivek Doshi
Vivek Doshi

Reputation: 58533

Component Side :

battery_level = 'empty'

Template Side :

<ion-item>
    <i class="fa fa-battery-{{battery_level}}" 
    [ngStyle]="{'color': battery_level=='empty' ? 'red' : battery_level=='4' ? 'green' : 'black' }"
    ></i> Battery Level {{battery_level}}
</ion-item>

<ion-list>
    <ion-item (click)='battery_level = "empty"'>
        <i class="fa fa-battery-empty" style="color: red;"></i> Battery Level Empty
    </ion-item>
    <ion-item (click)='battery_level = "1"'>
        <i class="fa fa-battery-1"></i> Battery Level 1
    </ion-item>
    <ion-item (click)='battery_level = "2"'>
        <i class="fa fa-battery-2"></i> Battery Level 2
    </ion-item>
    <ion-item (click)='battery_level = "3"'>
        <i class="fa fa-battery-3"></i> Battery Level 3
    </ion-item>
    <ion-item (click)='battery_level = "4"'>
        <i class="fa fa-battery-4" style="color: green;"></i> Battery Level 4
    </ion-item>
</ion-list>

WORKING DEMO

Upvotes: 3

Related Questions