Xtykutl

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)

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>

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