ListGroupModule

List groups are flexible and powerful components for displaying both simple lists of elements and complex ones with custom content. A list group is used like the ul HTML element, you simply add the c8y-list-groupcomponent and add c8y-li-items as children to it. Inside the c8y-li-item component any HTML or custom tag content is projected. There are the following additional elements which allow to enhance the functionality:

• c8y-li-icon -> displays an icon at the start.
• c8y-li-checkbox -> displays a checkbox for selecting the item.
• c8y-li-radio -> displays a radio for selecting the item.
• c8y-li-collapse -> displays collapsible content, for example for detail views.
• c8y-li-action -> displays multiple actions to perform on the item.
• c8y-li-footer -> displays details of the item in a footer.

Usage example

The component can be fully used by content projection in the template. A simple example shows all the concepts at once:

<c8y-list-group>
  <c8y-li
    *c8yFor="
       let device of devices;
       let i = index;
     "
  >
    <c8y-li-radio (onSelect)="updateSelected($event, device)"></c8y-li-radio>
    <c8y-li-icon [icon]="'rocket'"></c8y-li-icon>
    {{ i + 1 }}. {{ device.name || '-' }}
    <c8y-li-footer>
      Device id: <a [routerLink]="['/device', device.id]">{{ device.id }}</a>
    </c8y-li-footer>
    <c8y-li-action (click)="deleteDevice(device.id)" icon="times">
      Delete
    </c8y-li-action>
    <c8y-li-action (click)="(false)" icon="rocket">
      Launch to space
    </c8y-li-action>
  </c8y-li>
</c8y-list-group>

In combination with a forOf you can compose more complex examples. E.g. the following example shows a list of all devices with a radio button to select devices, an icon, multiple actions and a footer:

<c8y-list-group>
  <c8y-li
    *c8yFor="
      let device of devices;
      let i = index;
    "
  >
    <c8y-li-radio></c8y-li-radio>
    <c8y-li-icon [icon]="'rocket'"></c8y-li-icon>
    {{ i + 1 }}. {{ device.name || '-' }}
    <c8y-li-footer>
      Device id: <a [routerLink]="['/device', device.id]">{{ device.id }}</a>
    </c8y-li-footer>

    <c8y-li-action (click)="deleteDevice(device.id)" icon="times">
      Delete
    </c8y-li-action>
    <c8y-li-action (click)="(false)" icon="rocket">
      Launch to space
    </c8y-li-action>
  </c8y-li>
</c8y-list-group>

The content projection allows to add any inline element. For example, you can align the content with an HTML flex box or add a badge quite easy. More examples can be found in the tutorial application:

npx @c8y/cli new myTutorialApp tutorial
cd myTutorialApp
npm install
npm start -- -u http://your-cumulocity-tenant.cumulocity.com