I recently created a photo gallery that showcases various images sorted by categories. In this setup, I have one object containing both images and their respective categories, and another object solely dedicated to storing the categories.
The challenge I am facing is properly displaying the images within their corresponding categories without any blank spaces. Currently, as I traverse through the array of categories and evaluate the condition, it leaves empty spaces when false. How can I ensure that only images that meet the specified category condition are displayed?
If anyone could provide some guidance or assistance, I would greatly appreciate it!
Condition
*ngIf="product.Cat == cat"
html
<div *ngFor="let cat of Cats">
<div class="row ">
<span class="">{{cat}}</span>
</div>
<ul class="mdc-image-list my-image-list" style="padding-left: 10px;padding-right: 10px;">
<li class="mdc-image-list__item" *ngFor="let product of Images; let j = index;">
<div *ngIf="product.Cat == cat">
<div class="mdc-image-list__image-aspect-container">
<ng-container *ngIf="product.image == null; else productImage">
<img src="./assets/image-not-found.svg" class="mdc-image-list__image imagenotfound">
</ng-container>
<ng-template #productImage>
<img [src]="product.image" class="mdc-image-list__image">
</ng-template>
</div>
</div>
</li>
</ul>
</div>
https://i.sstatic.net/tbakl.png
My issue arises when an image does not match its designated category, resulting in unwanted white spaces between images. Any suggestions on how to rectify this problem would be highly appreciated!