Showing only html elements which have will get true condition in angular html

Question

I have two loop conditions inside my html file

• the first loop will show some text descriptions

• the second will be the number of boxes based on the the number of descriptions shown in a column

  <tr *ngFor="let view3 of viewProgramDetails3; let ind = index;" style="white-space: pre-wrap;">
    <td>Step {{ ind + 1 }}</td>
    <td style="white-space: pre-wrap;">{{ view3.g_steps }}</td>
    <td>
      <h6>
      <span *ngFor="let item of arrayCbox; let in = index;">
          <ion-item *ngIf="view3.govthirdid == item.checkbox_stepsid">
            <ion-label>{{item.checkbox_stepsid}}</ion-label>
              <ion-checkbox [(ngModel)]="pepperoni"></ion-checkbox>
            </ion-item>
      </span>
      </h6>
    </td>
  </tr>
  

The output is correct because if there is only 3 description sentences shown, also the checkbox will also show only 3. But the problem if the condition is not true it will create a new line that makes the table larger.

The expected output hopefully would be something like this

step 1 |  description 1 |  checkbox 1
       |  description 2 |  checkbox 2
       |  description 3 |  checkbox 3

but the actual output is like this

step 1 | description 1 | checkbox 1
       | description 2 | checkbox 2
       | descripttion3 | checkbox 3
                       | (newline its empty)
                       | (newline its empty)
                       | (newline its empty)
                       | (newline its empty)

Answer 1

Try to make your entire <td> conditional :

<tr *ngFor="let view3 of viewProgramDetails3; let ind = index;" style="white-space: pre-wrap;">
  <td>Step {{ ind + 1 }}</td>
  <td style="white-space: pre-wrap;">{{ view3.g_steps }}</td>
  <ng-container *ngFor="let item of arrayCbox; let in = index;">
    <td *ngIf="view3.govthirdid == item.checkbox_stepsid">
      <h6>
        <ion-item>
          <ion-label>{{item.checkbox_stepsid}}</ion-label>
            <ion-checkbox [(ngModel)]="pepperoni"></ion-checkbox>
          </ion-item>
      </h6>
    </td>
  </ng-container>
</tr>

Answer 2

Instead of placing the *ngFor on the <span> put it on a <ng-container>:

<ng-container *ngFor="let item of arrayCbox; let in = index;">
  <span *ngIf="view3.govthirdid == item.checkbox_stepsid">
    <ion-item>
      <ion-label>{{item.checkbox_stepsid}}</ion-label>
        <ion-checkbox [(ngModel)]="pepperoni"></ion-checkbox>
      </ion-item>
  </span>
</ng-container>

The ng-container is an angular specific container element which has no output after rendering