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 ment 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!

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 ment 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!

• javascript
• angular
• typescript
• angular-ng-if

• Wouldn't it be less plicated 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 Commented May 11, 2017 at 11:44
• Then you should filter aufrufe (in your ponent logic) and only return those items that you are going to display. – Igor Commented May 11, 2017 at 11:44
• "creates an empty tr with this ment in it ... And that destroys my style" How does the ment interfere with the styling? – a better oliver Commented May 11, 2017 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 Commented May 11, 2017 at 12:04

3 Answers 3

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>

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>

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>
...