CODEWITHSUNDEEP
angularjstypescriptionic-frameworkionic3
jublikon
jublikon

Reputation: 3447

Ionic 3 - list view with buttons referencing the clicked item

I have a simple list with buttons layout: 

  <ion-list inset *ngFor="let audio of event.audios; let i = index">
      <ion-item>

        <div class="item-text-center item-text-wrap">  {{audio.fileName}} </div>

        <ion-buttons end>
          <button  end ion-button icon-only color="primary" (click)="playAudio(audio)">
            <ion-icon name="{{playButtonIcon}}"></ion-icon>
          </button>
          <button  end ion-button icon-only color="primary" (click)="deleteAudio(audio)">
            <ion-icon name="close"></ion-icon>
          </button>
        </ion-buttons>

      </ion-item>
  </ion-list>

Note that there is a variable playButtonIcon that changes each time a button in the list is clicked.

Problem: Each time I click an item in the list every item in the list changes it's icon. That does not make sense. Only the button in the clicked item should change.

Question: How can I achieve to change the button icon of the clicked item ? My idea until now was to have an extra array containing for each item in the list the variable playButtonIcon to change from stop to play. But that does not seem like the way to go. Is there an official pattern for that case?

Note: I know that I can get the item clicked. An example can be seen here. But in my data model there is no field playButtonIcon because it is just a technical thing and thus I need another way to access the button of the clicked item.

Upvotes: 0

Views: 922

Answers (1)

Diluk Angelo
Diluk Angelo

Reputation: 1503

Why dont you try something like this

view.html

     <button  end ion-button icon-only color="primary" (click)="playAudio(audio)">
  <ion-icon name="{{playButtonIcon}}" *ngIf="typeOf audio.isPlaying == 'undefined'">{{Playbuttonicon}}</ion-icon>
  <ion-icon name="{{pauseButtonIcon}}" *ngIf="typeOf audio.isPlaying != 'undefined'">{{PauseButtonIcon}}</ion-icon>
</button>

component.ts

playAudio(audio){
//get the index of the current audio in the array 
 let idx = this.audios.indexOf(audio);
//make a new property called isPlaying and assign a boolean true
this.audios[idx]["isPlaying"] = true; 
}

Or Else re loop the array and add an extra property called icon and on click change the icon.

Upvotes: 1

Related Questions