# @mikelgo/ngx-list

> A generic and customizable list component for Angular.

Latest version **14.1.0** (published 2022-07-31) · 0 weekly downloads

## Install

```sh
npm install @mikelgo/ngx-list
pnpm add @mikelgo/ngx-list
yarn add @mikelgo/ngx-list
bun add @mikelgo/ngx-list
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 14.1.0 |
| Published | 2022-07-31 |
| First published | 2022-07-30 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 39.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | mikelgo |
| Keywords | angular, list, ngx-list, generic, customizable |

## Links

- npm: https://www.npmjs.com/package/@mikelgo/ngx-list
- npm.io page: https://npm.io/package/@mikelgo/ngx-list

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) ^2.3.0

## Recent versions

- 14.1.0 (latest) — 2022-07-31
- 14.0.2 — 2022-07-31
- 14.0.1 — 2022-07-31
- 14.0.0 — 2022-07-30

## README

# 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

```typescript
// 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:

```scss
.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

---
_Source: https://npm.io/package/@mikelgo/ngx-list · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._