Skip to main content
Added page id to act as a key for first level iteration
Source Link
POZ
  • 4.5k
  • 14
  • 29

EDIT: changed my answer because previous one was wrong:

You have to write a JS expression that paginates your list like this:

get getContacts() {
  return [
    { id: 0, items: ['a', 'b', 'c', 'd', 'e']}, // Page 0, max 5 item
    { id: 1, items: ['f', 'g'],} // Page 1
  ];
}

Then use two iterations in your template:

<template for:each={getContacts} for:item="page">
  <div key={page.id}>
    <template for:each={page.items} for:item="contact">
      {contact}
    </template>
  </div>
</template>

EDIT: changed my answer because previous one was wrong:

You have to write a JS expression that paginates your list like this:

get getContacts() {
  return [
    ['a', 'b', 'c', 'd', 'e'], // Page 0, max 5 item
    ['f', 'g'], // Page 1
  ];
}

Then use two iterations in your template:

<template for:each={getContacts} for:item="page">
  <template for:each={page} for:item="contact">
    {contact}
  </template>
</template>

EDIT: changed my answer because previous one was wrong:

You have to write a JS expression that paginates your list like this:

get getContacts() {
  return [
    { id: 0, items: ['a', 'b', 'c', 'd', 'e']}, // Page 0, max 5 item
    { id: 1, items: ['f', 'g']} // Page 1
  ];
}

Then use two iterations in your template:

<template for:each={getContacts} for:item="page">
  <div key={page.id}>
    <template for:each={page.items} for:item="contact">
      {contact}
    </template>
  </div>
</template>
added 256 characters in body
Source Link
POZ
  • 4.5k
  • 14
  • 29

EDIT: changed my answer because previous one was wrong:

You just needhave to write a JS expression that does that for youpaginates your list like this:

get isMod5getContacts() {
  return index[
 %   ['a', 'b', 'c', 'd', 'e'], // Page 0, max 5 ==item
 0;   ['f', 'g'], // Page 1
  ];
}

AndThen use that expressiontwo iterations in your template:

<template iffor:true=each={isMod5getContacts}> for:item="page">
...  <template for:each={page} for:item="contact">
    {contact}
  </template>
</template>

You just need to write a JS expression that does that for you:

get isMod5() {
  return index % 5 == 0;
}

And use that expression in your template:

<template if:true={isMod5}>
...
</template>

EDIT: changed my answer because previous one was wrong:

You have to write a JS expression that paginates your list like this:

get getContacts() {
  return [
    ['a', 'b', 'c', 'd', 'e'], // Page 0, max 5 item
    ['f', 'g'], // Page 1
  ];
}

Then use two iterations in your template:

<template for:each={getContacts} for:item="page">
  <template for:each={page} for:item="contact">
    {contact}
  </template>
</template>
Source Link
POZ
  • 4.5k
  • 14
  • 29

You just need to write a JS expression that does that for you:

get isMod5() {
  return index % 5 == 0;
}

And use that expression in your template:

<template if:true={isMod5}>
...
</template>