CODEWITHSUNDEEP
angularangular-changedetectionangular-ng-class
sinan
sinan

Reputation: 484

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

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

Upvotes: 1

Views: 470

Answers (1)

Mohammed
Mohammed

Reputation: 1022

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

Upvotes: 1

Related Questions