How to change a particular attribute value in Angular 2 / ionic 2? - angularjs

Question

So I have this html which dynamically creates cards using the *ngFor
<ion-card *ngFor="let numbers of [0,1,2,3]; let i = index">
<ion-card-content>
<ion-card-title clear>
Card {{i}}
</ion-card-title>
</ion-card-content>
<button ion-button block class="blockbutton" (click)="doSomething(i)">
<ion-icon [name]="iconName" class="plussign"></ion-icon>
<div> Join Room </div>
</button>
</ion-card>
And this is in my .ts
export class FeedPage {
iconName : string;
constructor(public navCtrl: NavController) {
this.iconName = 'add-circle';
}
}
public doSomething(item): void{
console.log(item);
this.iconName = 'checkmark-circle';
}
So this code, on clicking the Block Button, turns all the icons of all the Block Buttons to to checkmark-circle
How do I change only that Particular Button's icon i.e. [name] attribute to checkmark-circle.
I've succeeded in retrieving the index for that element. But how do I modify only that Particular Button ?

Answer 1

Have an array of iconNames.
<ion-icon [name]="iconName[i]" class="plussign"></ion-icon>
In your component side:
public doSomething(item): void{
console.log(item);
this.iconName[item] = 'checkmark-circle';
}
}
You will have to set the entire array depending on the number of cards though.
iconNames:string[]=[];
constructor(public navCtrl: NavController) {
//loop through your card count and push initial value.
iconNames.push(`add-circle`);
}

Answer 2

You should have different icon names for each items in the array.
First maintain an array of objects in your .ts like this:
private _array = [{"iconName" : "name1"},{"iconName" : "name2"}]; // And so on..
Now, in your .html:
<ion-card *ngFor="let numbers of _array let i = index">
<ion-card-content>
<ion-card-title clear>
Card {{i}}
</ion-card-title>
</ion-card-content>
<button ion-button block class="blockbutton" (click)="doSomething(numbers)">
<ion-icon [name]="numbers.iconName" class="plussign"></ion-icon>
<div> Join Room </div>
</button>
</ion-card>
And doSomething() will become:
public doSomething(item): void{
console.log(item);
item.iconName = 'checkmark-circle';
}