Angular2 ngIf creates empty element when false

Question

I have a problem with Anguar2 and ngIf:

I have a code that creates a table from an array(with a DIY coded offset of 6):

<table class="table2">
  <tr>
    <th>Raum</th>
    <th>Ticket</th>
  </tr>
  <tr *ngFor="let a of aufrufe | async; let odd = odd; let i = index" [@newsState]="anistate[a.appid]" (click)="switchState(a)">
    <ng-container *ngIf="a.room != 'Beratungsplatz' && i > 7 ">
      <ng-container *ngIf="odd">
        <td class="roomodd">{{a.room}}</td>
        <td class="ticketodd">{{a.ticket}}</td>
      </ng-container>
      <ng-container *ngIf="!odd">
        <td class="room">{{a.room}}</td>
        <td class="ticket">{{a.ticket}}</td>
      </ng-container>
    </ng-container>
  </tr>
</table>

The problem is, that angular creates an empty tr with this comment in it:

<tr _ngcontent-c1="" class="">
    <!--bindings={
       "ng-reflect-ng-if": "false"
    }-->
</tr>

And that "destroys" my style. Shouldn't the ngIf in the first ng-container print nothing if it it false?(index > 7)

Thank you in advance!

Wouldn't it be less complicated and more stable to just filter the arrays in the controller and then bind the filtered arrays so that you didn't need any conditionals in the markup? The less logic in your markup, the better. I happen to know for sure this is the internal practice. — Tim Consolazio, May 11 '17 at 11:44
Then you should filter `aufrufe` (in your component logic) and only return those items that you are going to display. — Igor, May 11 '17 at 11:44
_"creates an empty tr with this comment in it ... And that destroys my style"_ How does the comment interfere with the styling? — a better oliver, May 11 '17 at 11:52
@zeroflagL I don't know why, but the tr had a margin (Set it in the CSS to 0 but it was still there). But it's fixed now :) — ThatsEli, May 11 '17 at 12:04

score 2 · Accepted Answer · answered May 11 '17 at 11:50

Try using <ng-container> for the *ngFor, and only include the <tr> when you are inside the first *ngIf

<ng-container *ngFor="let a of aufrufe | async; let odd = odd; let i = index" >
  <ng-container *ngIf="a.room != 'Beratungsplatz' && i > 7 ">
    <tr [@newsState]="anistate[a.appid]" (click)="switchState(a)">
      <ng-container *ngIf="odd">
        <td class="roomodd">{{a.room}}</td>
        <td class="ticketodd">{{a.ticket}}</td>
      </ng-container>
      <ng-container *ngIf="!odd">
        <td class="room">{{a.room}}</td>
        <td class="ticket">{{a.ticket}}</td>
      </ng-container>
    </tr>
  </ng-container>
</tr>

Mario Petrovic · Answer 2 · 2017-05-11T11:52:25.557

Obvious answer would be to put *ngIf and *ngFor on <tr> but that is not possible.

My proposal is to make pipe that will filter all records that fall under condition a.room != 'Beratungsplatz' && i > 7. That way you will print only elements that need to be there.

Example:

Pipe

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
    name: 'rooms'
})

export class RoomsFilter implements PipeTransform {
    transform(value: any, roomName: string, index: number, allowedValue: number ): any {
        return room != roomName && index > allowedValue ;
    }
}

Html

...
<tr *ngFor="let a of aufrufe | async | rooms: a.room: 'Beratungsplatz': i : 7; let odd = odd; let i = index" [@newsState]="anistate[a.appid]" (click)="switchState(a)">
    <ng-container *ngIf="odd">
        <td class="roomodd">{{a.room}}</td>
        <td class="ticketodd">{{a.ticket}}</td>
    </ng-container>
    <ng-container *ngIf="!odd">
        <td class="room">{{a.room}}</td>
        <td class="ticket">{{a.ticket}}</td>
    </ng-container>
</tr>
...

I will try that too, the other answer worked too, I will choose the best :) — ThatsEli, May 11 '17 at 12:01

score 0 · Answer 3 · answered May 11 '17 at 11:50

Try with template

<table class="table2">
  <tr>
    <th>Raum</th>
    <th>Ticket</th>
  </tr>
  <template ngFor let-a [ngForOf]="aufrufe | async" let-i=index [@newsState]="anistate[a.appid]" (click)="switchState(a)">
  <tr *ngIf="a.room != 'Beratungsplatz' && i > 7 ">
    <ng-container>
      <ng-container *ngIf="odd">
        <td class="roomodd">{{a.room}}</td>
        <td class="ticketodd">{{a.ticket}}</td>
      </ng-container>
      <ng-container *ngIf="!odd">
        <td class="room">{{a.room}}</td>
        <td class="ticket">{{a.ticket}}</td>
      </ng-container>
    </ng-container>
  </tr>
 </template>
</table>

Angular2 ngIf creates empty element when false

3 Answers3