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 >
        <ng-container *ngFor="let thumb of thumbnails; let index = index">
          <div
           [ngStyle]="{ background: 'url('   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();
    }

CodePudding user response：

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