1

iam listing some images from an array,the current image has a orage border. when the user clicks an image it becomes the current image but on clicking the border from previous current image disappearing but class containing orage border is not applying to the updated current image

why angular is not detecting this variable change?

my html code:

      <div class="product-thumbnail-box">
        <ng-container *ngFor="let thumb of thumbnails; let index = index">
          <div
           [ngStyle]="{ background: 'url(' + thumb + ')' }"
           class="thumb"
           [ngClass]="{ 'thumb-active': thumb === currentThumbnail }"
           (click)="choosePicture(index)"
          ></div>
        </ng-container>
      </div>

my component.ts code:

    constructor(private cd: ChangeDetectorRef) {}
    showLightBox = false;
    images = [
     'assets/images/image-product-1.jpg',
     'assets/images/image-product-2.jpg',
     'assets/images/image-product-3.jpg',
     'assets/images/image-product-4.jpg',
    ];
    thumbnails = [
      'assets/images/image-product-1-thumbnail.jpg',
      'assets/images/image-product-2-thumbnail.jpg',
      'assets/images/image-product-3-thumbnail.jpg',
      'assets/images/image-product-4-thumbnail.jpg',
    ];
    currentImage = this.images[0];
    currentThumbnail = this.thumbnails[0];
    
    choosePicture(index: number) {
      this.currentImage = this.images[index];
      this.currentThumbnail = this.currentThumbnail[index];
      this.cd.detectChanges();
    }
sinan
  • 133
  • 8
  • 2
    -You shouldn't need to do `this.cd.detectChanges();` so try and remove it. - Print using console.log, the values `currentImage`and `currentThumbnail` to check that they have the correct values. - Check in the navigator inspector if the element has the class you are assigning to it. - If none of these work, try to reproduce it in a stackblitz.com, then send us a link here and we'll help :D. – Meddah Abdallah Nov 19 '22 at 13:32

1 Answers1

1

Actually you mispelt your array variable name

instead this line at your choose picture method

    this.currentThumbnail = this.currentThumbnail[index];

add this line

   this.currentThumbnail = this.thumbnails[index];
Mohammed
  • 838
  • 6
  • 14