Group image in gallery

Question

I developed an image gallery. I have an object with images and with the category (Cat) and another object that contains only category.

In the gallery I want to divide the images that in the different categories, for that I am buying the category that I have in the images array with the array that has only the categories.

My problem is that the array is traversed and when the condition is false, there is a blank space :( How can I remove this space and display only all the images in this category respecting the condition?

Can someone help me?

DEMO

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>

As you can see, when the image does not belong, there is a space created in white, this is my problem and I don't know how to fix it :(

Answer 1

The problem is that you are adding a li to your unordered list regardless of whether or not your image belongs to that category, so it is taking up space. Change your template to the following:

<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;">
    <ng-container *ngFor="let product of Images; let  j = index;">
      <!-- We only want a li if this product belongs to this category -->
      <li class="mdc-image-list__item" *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>
      </li>
    </ng-container>
  </ul>
</div>

Here's a working example.