Angular 4 : add new td to table with ngif with modulo in an ngfor

Question

I'm a beginner and I'm using Angular 4.3.2 in my project. I'm trying to make a table which looks like this : (I have 2 arrays : the legend is an enum, and I have items)

EnumValue1 || item1 | item2 | item3 | item4
EnumValue2 || item5 | item6 | item7 | item8
EnumValue3 || item9 | item10| item11| item12
EnumValue4 || item13| item14| item15| item16

I would like to iterate throw the items and say something like this to create new td : *ngif="items.length%4==0

I've this html code :

        <tr *ngFor="let enum of enums">
            <th>{{enum}}</th>
            <ng-container *ngFor="let item of items">
                <td *ngIf="items.length%4==0">{{item .id}}</td>
            </ng-container>
        </tr>

But it displays nothing.

This code displays all my items at each rows :

            <tr *ngFor="let enum of enums">
                <th>{{enum}}</th>
                <ng-container *ngFor="let item of items">
                    <td>{{item.id}}</td>
                </ng-container>
            </tr>

I don't know how to proceed. I've tried to follow this example but I can't put two *ng in one tag : example with angular JS 1.3

Any help would be welcome.

Edit part : describe arrays content-- My arrays look like this in my model.ts :

export enum enums{
    'EnumValue1',
    'EnumValue2',
    'EnumValue3 ',
    'EnumValue4 '
}

In my component, I retrieve my enum :

keys(): Array<string> {
    const keys = Object.keys(enums);
    return keys.slice(keys.length / 2);
}

My items are an attribute of an object, in my component it looks like that :

export class MyDialogComponent implements OnInit {
    items: Item[];
    object: Object;

    [...constructor]

    ngOnInit() {
        this.items = this.object.items;
    }
}

My object is defined when a pop up is opened in order to edit this object.

--end edit

Can you provide us with more details about your arrays , it would be easier to debug if you could. — Jamil Alisgenderov

Vivek Doshi Vivek Doshi · Accepted Answer · 2018-02-02T10:39:08

All you need is this items.slice(i*4 , (i+1)*4) :

<table>
  <tr *ngFor="let enum of enums;let i = index;">
      <th>{{enum}}</th>
      <ng-container *ngFor="let item of items.slice(i*4 , (i+1)*4)">
          <td>{{item}}</td>
      </ng-container>
  </tr>
</table>

WORKING DEMO

Angular 4 : add new td to table with *ngif with modulo in an *ngfor

1 Answers

Angular 4 : add new td to table with ngif with modulo in an ngfor