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

Questions

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

January 29, 2022

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.

[{
"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"
}]

>Solution :

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 class="col-3">
    <!--  -->
  </div>
  <div *ngIf="i % 16 === 15" class="col-12"></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' }
  ];