CODEWITHSUNDEEP
javascripthtmlangular
Neamesis
Neamesis

Reputation: 744

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

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)

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

Upvotes: 1

Views: 1395

Answers (1)

Vivek Doshi
Vivek Doshi

Reputation: 58573

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

Upvotes: 4

Related Questions