Changing values in ionic not getting?

Ionic Framework ionic-v3
1

Hi please check below code

 <ion-card *ngFor="let data of allData" >
      <ion-icon *ngIf="data.is_favourite" class="starIcon" id="favourite" (click)="favourite(0)" name="star"></ion-icon>
     <ion-icon *ngIf="!data.is_favourite" class="star-outline" id="favourite" (click)="favourite(1)" ios="ios-star-outline" md="md-star-outline"></ion-icon>
    </div>  
  </ion-card>

in above , list will come based on above conditions so on click I want to change values of that particular list

example

if I click on first if condition then that row value should now exist in above line it should come in 2nd If condition and vice versa with 2nd if condition

Hope u r getting what I want to say

there is one more way easy way to do this i.e change the background color based on if condition

but how to that on particular ion-icon that is what my main concern is …

2

I’m not sure I understand your question, but your code strikes me as bizarre. Why do you need two separate icons, and if they’re clickable, why aren’t they buttons? What does the favourite() method do? Incidentally, I feel strongly that giving properties meaningful names (i.e. not “data”) really improves how readable and self-documenting your code is.

3

thanks…

Why do you need two separate icons, and if they're clickable,

can make buttons also I was just using ionic icons

What does the favourite() method do?

here when I click then in favourite function I have to change icon names so that if icon is star it should become star outline and vice versa

4

Again, I see no need for two elements.

<ion-icon [ngClass]="data.isFavourite ? 'starIcon' : 'star-outline'">

Also, please decide on a consistent naming convention.

5

ok this one is cool thanks but I have to change only ion-icon name so can I go with this…

<ion-icon name="data.isFavourite ? 'starIcon' : 'star-outline'>
6

for below code

<ion-icon name="data.isFavourite ? 'starIcon' : 'star-outline'>

I got the following error

Failed to execute 'add' on 'DOMTokenList': The token provided ('ion-md-data.isFavourite ? starIcon : star-outline ') contains HTML space characters, which are not valid in tokens.

So I guess mine is not correct way

7

Notice the brackets [ ] in the name property. Also, there was a " missing at the end of the expression:

<ion-icon [name]="data.isFavourite ? 'starIcon' : 'star-outline'">
1 Like
8

thanks its working but now the main prob I have click function in below code

<ion-icon [name]="data.isFavourite ? 'starIcon' : 'star-outline'"  (click)="favourite(data.isFavourite)" id="favourite-data.id" >

so how do change the value for is favourite for a particular icon in ts

9

(click)="data.isFavourite = !data.isFavourite"

10 
(click)="data.isFavourite = !data.isFavourite"

in ts what how do I change particular value I have this icon in for loop so for a particular icon what to write dont know???
thanks

11

hi got it thanks everyone…

12

Could you share the solution or select the one given to you as the solution (checkbox icon under post)?

13

Hi,

in html

<ion-icon [name]="data.isFavourite ? 'starIcon' : 'star-outline'"  (click)="favourite(data)" id="favourite-data.id">

in ts

favourite(data) {
     if (data.isFavourite || data.isFavourite != undefined) {
      if(data.isFavourite==0){
        data.isFavourite=1;
      }
      else{
        data.isFavourite=0;
      }

   
  }