[Fixed] For loop filtered without leaving blank spaces in angular table

Issue

developers! I’m trying to populate a table with a for loop in Angular, without leaving empty spaces on the loop that doesn’t commit a specific condition.

Let’s say I have 2 ngfor nested, where the first loops over a headers array displaying them in a horizontal position, and the second would loop over an array of objects which would be filtered in the HTML, populating for every header in a vertical way those items that commit the headers specifications.

<ion-row>
  <ion-item *ngFor="let book of byGroup">
    <ion-col>
      <ion-label>{{book}}</ion-label>
      //looping on headers
      <ion-item *ngFor="let book1 of allBooks[0]">
        <ion-label *ngIf="book1.group==book">{{book1.title}}</ion-label>
      </ion-item>
    </ion-col>
    //An now here for each header I just loop the whole array of objects omitting 
    //those objects that don't match with the header string that in the time the loop goes over
  </ion-item>
</ion-row>

And the result would be something like this:

How could I set this properly without empty cells?
Thanks in advance!!

Solution

Add the two conditions book1.title && book1.title.trim().length.

Final Code:

<ion-row>
    <ion-item *ngFor="let book of byGroup">
        <ion-col>
            <ion-label>{{book}}</ion-label>
            //looping on headers
            <ion-item *ngFor="let book1 of allBooks[0]">
                <ion-label *ngIf="book1.group==book && book1.title && book1.title.trim().length">{{book1.title}}</ion-label>
            </ion-item>
        </ion-col>
        //An now here for each header I just loop the whole array of objects omitting 
       //those objects that don't match with the header string that in the time the loop goes over
               
    </ion-item>
</ion-row>

Edit:

Hope it’s working. I’ve got tired. Forked your project at Stackblitz.