add a div with class row in bootstrap after every 16 items using ngFor in angular-CodePudding

I have an object as bellow and needs to loop through ngFor with col-3 to get 4 per row, after every 16 items need to add a div with col-12. Kindly provide the best approach.

Sample data

[
  { lmd_id: '1', store: 'store.com' },
  { lmd_id: '2', store: 'store.com' },
  { lmd_id: '3', store: 'store.com' },
  { lmd_id: '4', store: 'store.com' },
  { lmd_id: '5', store: 'store.com' },
  { lmd_id: '6', store: 'store.com' },
  { lmd_id: '7', store: 'store.com' },
  { lmd_id: '8', store: 'store.com' },
  { lmd_id: '9', store: 'store.com' },
  { lmd_id: '10', store: 'store.com' },
  { lmd_id: '11', store: 'store.com' },
  { lmd_id: '12', store: 'store.com' },
  { lmd_id: '13', store: 'store.com' },
  { lmd_id: '14', store: 'store.com' },
  { lmd_id: '15', store: 'store.com' },
  { lmd_id: '16', store: 'store.com' },
  { lmd_id: '17', store: 'store.com' },
  { lmd_id: '18', store: 'store.com' },
  { lmd_id: '19', store: 'store.com' },
  { lmd_id: '20', store: 'store.com' }
]

CodePudding user response：

you can make use of

*ngFor="let item of items; let index = index;"

then just use *ngIf

<div *ngIf="((index   1) % 16) === 0" ></div>

CodePudding user response：

I don't think I understood you well.

But here is an implementation of what you are trying to accemplish:

// template.html
<ng-container *ngFor="let item of list; let i = index">
  <div >
    <!--  -->
  </div>
  <div *ngIf="i % 16 === 15" ></div>
</ng-container>

// component.ts
  list = [
    { lmd_id: '1', store: 'store.com' },
    { lmd_id: '2', store: 'store.com' },
    { lmd_id: '3', store: 'store.com' },
    { lmd_id: '4', store: 'store.com' },
    { lmd_id: '5', store: 'store.com' },
    { lmd_id: '6', store: 'store.com' },
    { lmd_id: '7', store: 'store.com' },
    { lmd_id: '8', store: 'store.com' },
    { lmd_id: '9', store: 'store.com' },
    { lmd_id: '10', store: 'store.com' },
    { lmd_id: '11', store: 'store.com' },
    { lmd_id: '12', store: 'store.com' },
    { lmd_id: '13', store: 'store.com' },
    { lmd_id: '14', store: 'store.com' },
    { lmd_id: '15', store: 'store.com' },
    { lmd_id: '16', store: 'store.com' },
    { lmd_id: '17', store: 'store.com' },
    { lmd_id: '18', store: 'store.com' },
    { lmd_id: '19', store: 'store.com' },
    { lmd_id: '20', store: 'store.com' }
  ];