ngx-list

A generic and customizable list component for Angular.

Why?

Lists are a very common UI component in almost every application. However, to build a really generic and flexible list component in terms of the appearance of the list items some advanced techniques are required.

Features

• [x] OnPush change detection
• [x] Customizable list item
• [x] Customizable list item context
• [x] Generic
• [x] Tiny bundle size

Usage

// in some component
<ngx-list
    [items]="items"
  <ng-template [ngxListContext]="items" let-item let-active="active" let-selected="selected">
    <div (click)="onSelect(item)"
      class="border border-gray-300 shadow-lg rounded-lg bg-white px-10 py-8 mb-4"
        [class.item_active]="active"
        [class.item_selected]="selected"
        >
      <span >{{item.name}} | {{item.id}} </span>
    </div>
  </ng-template>
</ngx-list>

The Styles:

.item_active {
  @apply bg-gray-300/30;
}
.item_selected {
  @apply bg-blue-500/30;
}

Compatibility

• version 14.0.0 is compatible with Angular v14.0.0 and higher