In my application, there is a child component responsible for fetching and displaying images from an API on the template. The parent component consists of a list of items, and when a user selects an item from the list, a request is made to the API to retrieve the corresponding image. At this point, the child component is rendered, showing the image that belongs to the selected item.
However, I encountered an issue where if the user selects a new item while the child component is already displayed, the previous image remains visible until the new image is fetched from the API. This can be confusing and inconsistent for the user experience.
I am seeking suggestions on how to prevent the display of the previous image and ensure that only the relevant image is shown when a new item is selected. Any insights or advice on achieving this would be greatly appreciated.
Below is a snippet of the parent component template where the child component is invoked:
<ng-container matColumnDef="expandedDetail">
<td mat-cell *matCellDef="let element" [attr.colspan]="shownColumns.length">
<div class="example-element-detail" [@detailExpand]="element == expandedElement ? 'expanded' : 'collapsed'">
<div>
<image-card [img64]="img64"></image-card> -->
</div>
</div>
</td>
</ng-container>
Child img64 @Input:
@Input()
public set img64(value: blob) {
this.loadingData = true;
if (value) {
this.image = value.base64Image;
const objectURL = 'data:image/jpeg;base64,' + this.image;
this.thumbnail = this.sanitizer.bypassSecurityTrustUrl(objectURL);
}
}