Generate dynamic table with div based on ngFor loop

Question

The code below is in a view of main-category.component

<div>
  <div *ngFor="let category of categories;"> 
      <app-subcategory>
        [name]="category.name">
      </app-subcategory>
  </div>
</div>

I'd like generate a table with 4 columns and x rows depending the number of items in categories. Each cell contain the component app-subcategory.

I don't see the right way to do this. Do you have idea ?

Thanks,

By 7k rep it's expected that you'd know the difference between a requirement and a question. What have *you tried*, and what exactly is the problem with it? — jonrsharpe, Dec 06 '17 at 08:01
You need to give more information. Where is the table? If it is inside the div within app-subcategory, then you are creating multiple tables. What have you tried as yet? — Vinod Bhavnani, Dec 06 '17 at 08:06
@VinodBhavnani I updated the question. The code is in the view of a component 'main-category.component' I'd like display x times a sub component 'app-subcategory' based on the number of items in categories but with 4 columns by row. — Kris-I, Dec 06 '17 at 08:10

score 0 · Answer 1 · answered Dec 06 '17 at 08:12

@Pipe({ name: columns })
export class ColumnsPipe implements PipeTransform {
  transform(data, numColumns) {
    if(!data || data.length == 0) {
      return data;
    }

    var i,j,temparray,chunk = 10;
    result = [];
    for (i=0,j=data.length; i<j; i+=chunk) {
        result.pop(array.slice(i,i+chunk));
    }
    return result;
  }
}

see also https://stackoverflow.com/a/8495740/217408

<div>
  <div *ngFor="let row of categories | columns:4">
    <div *ngFor="let category of row"> 
      <app-subcategory>
        [name]="category.name">
      </app-subcategory>
    </div>
  </div>
</div>

You might want to change the divs into <tr> and <td> to get real rows and columns.

Generate dynamic table with div based on ngFor loop

1 Answers1