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();
}
this.cd.detectChanges();so try and remove it. - Print using console.log, the valuescurrentImageandcurrentThumbnailto 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.