Template Looping

templateLoopingIterator.css

.list-group {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  padding-left: 0;
  margin-bottom: 0;
  width: 50%;
}
.list-group-item:first-child {
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
}
.list-group-item-action {
  color: #495057;
  text-align: inherit;
  text-decoration: none;
}
.list-group-item {
  position: relative;
  display: block;
  padding: 0.75rem 1.25rem;
  margin-bottom: -1px;
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.125);
}
.list-group-item:last-child {
  margin-bottom: 0;
  border-bottom-right-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
}
.header, .footer{
    background: #295646;
    color:white;
}

templateLoopingIterator.html

<template>
    <lightning-card title="Iterator loop demo" icon-name="custom:custom16">
        <ul class="slds-m-around_medium">
            <div class="list-group-inline">
                <template iterator:ceo={ceoList}>
                    <div key={ceo.value.id}>

                        <a href="#" if:true={ceo.first} 
                        class="list-group-item list-group-item-action header"><strong>List of top companies and there CEO's : </strong></a>

                        <a href="#" class="list-group-item list-group-item-action"><strong>{ceo.value.company} : </strong> {ceo.value.name}</a>

                        <a href="#" if:true={ceo.last} class="list-group-item list-group-item-action footer"><strong>&copy; 2019 Salesforce troop </strong></a>
                    </div>
                </template>
            </div>
        </ul>
    </lightning-card>
    
</template>

templateLoopingIterator.js

import { LightningElement } from 'lwc';

export default class TemplateLoopingIterator extends LightningElement {
    ceoList = [
        {
            id: 1,
            company: "Google",
            name: "Sundar Pichai"
        },
        {
            id: 2,
            company: "Apple Inc.",
            name: "Tim cook"
        },
        {
            id: 3,
            company: "Facebook",
            name: "Mark Zuckerberg"
        },
        {
            id: 4,
            company: "Amazon.com",
            name: "Jeff Bezos"
        },
        {
            id: 5,
            company: "Capgemini",
            name: "Paul Hermelin"
        }
    ];
}

templateLoopingIterator.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>48.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>