How to select a photo and keep it selected


#1

Hello everyone.

I’m trying to build a photo app that allows me to click and choose which photos to use, but I’m having troubles using making the selection. I am able to click the photos and add them to an array but I am unable to disable each photo after it has been selected. I was using the disable property in button, but it disables all my buttons when the condition is met for one button. Any suggestions would be appreciated.

HTML

  <ion-row>
        <ion-col col-6 col-md-4 col-xl-3 *ngFor="let image of photoSelection; let i = index">
          <button class="button" (click)="onSelect(image, i)" [disabled]="i == item">
            <img 
              [src]="image.img" 
              style="width : 100% ; height : 100%" 
              >
          </button>
            
        </ion-col>
      </ion-row>

TS file

disabled = false;
item: number;

onSelect(pickedPicture: photoSelection, index: number) {
    if (this.disabled == false) {
      this.item = index;
      this.photoService.addPhotos(pickedPicture);
    }
    this.disabled = true;
  }