How to display preview of the selected image using Angular - css

Question

I would like to show the preview of the selected image busing Angular, as of now if we click all images are selected, can any one suggest me how to show preview of the selected one and if we select another image previously selected image should be unselect and display new image.
public images: Array<object> = [
{
src: 'https://picsum.photos/250/250/?image=110',
description: 'Notte in hotel di lusso',
price: 250
},
{
src: 'https://picsum.photos/250/250/?image=58',
description: 'Escursione alla scoperta degli animali dell\'isola',
price: 160
}
];
HTML:
<div class="image__container" [ngClass]="{ 'selected': selected }">
<img class="image" [src]="item.src">
<div
class="image__description"
(click)="selected = !selected"
>
<div class="image__description--content">
<div class="image__description--price">
{{ item.price }}
</div>
</div>
</div>
Stackblitz

Answer 1

Thanks for the detailed question, You can check the below stackblitz, I needed to just add a parent property that tracks the currently selected row, then emit an event from the child which updates the latest value from the child. Then if the changes do not show up, we can call this.cdr.detectChanges() to trigger change detection manually. Please check the below code and let me know if any questions.
import {
Component,
ChangeDetectionStrategy,
ChangeDetectorRef,
ViewChildren,
QueryList,
} from '#angular/core';
import { GridItemComponent } from '../grid-item/grid-item.component';
#Component({
selector: 'aer-grid',
templateUrl: './grid.component.html',
styleUrls: ['./grid.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class GridComponent {
currentlySelected;
#ViewChildren('gridItem') gridItems: QueryList<GridItemComponent>;
public images: Array<object> = [
{
src: 'https://picsum.photos/250/250/?image=110',
description: 'Notte in hotel di lusso',
price: 250,
},
{
src: 'https://picsum.photos/250/250/?image=58',
description: "Escursione alla scoperta degli animali dell'isola",
price: 160,
},
{
src: 'https://picsum.photos/250/250/?image=76',
description: 'Gita in bicicletta',
price: 50,
},
{
src: 'https://picsum.photos/250/250/?image=61',
description: "Visita di una delle cittadine dell'isola",
price: 25,
},
{
src: 'https://picsum.photos/250/250/?image=64',
description: 'Gita in motoscafo',
price: 85,
},
{
src: 'https://picsum.photos/250/250/?image=71',
description: 'Biglietto aereo',
price: 500,
},
{
src: 'https://picsum.photos/250/250/?image=65',
description: 'Cocktail sulla spiaggia',
price: 5,
},
];
constructor(private cdr: ChangeDetectorRef) {}
updateCurrentlySelected(value: number) {
this.currentlySelected = value;
this.cdr.markForCheck();
// not needed below line
// this.gridItems.forEach((item) => item.detectChanges());
}
}
html
<section class="grid-container">
<ng-container *ngFor="let image of images; let index = index">
<aer-grid-item
#gridItem
[item]="image"
[index]="index"
[currentlySelected]="currentlySelected"
(emitChange)="updateCurrentlySelected($event)"
></aer-grid-item>
</ng-container>
</section>
<!-- Preview of the selected image-->
<br />
<br />
<section>
*ngIf="images && images[currentlySelected] && images[currentlySelected].src"
Preview:
<img [src]="images[currentlySelected].src" />
stackblitz