CODEWITHSUNDEEP
angularjsangularionic-frameworkionic2
Sai Datta
Sai Datta

Reputation: 935

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

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 ?

Upvotes: 0

Views: 2352

Answers (2)

Sagar Kulkarni
Sagar Kulkarni

Reputation: 2081

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';
}

Upvotes: 0

Suraj Rao
Suraj Rao

Reputation: 29625

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`);


   }

Upvotes: 1

Related Questions