ngClass not detecting the changes when current item related to array change

Question

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();
    }

Answer 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];