ngx-list-manager

An Angular Service tool to manage lists efficiently.

Prerequisites

• Angular: >=19.2.0

Usage

1. Install via npm

npm i ngx-list-manager

2. Import

import { NgxListManager } from 'ngx-list-manager';

3. Usage example: In a table component that send events when rows are selected.

<div class="table-info">
   <span>Items selected: </span><span [innerText]="getList().length"></span>
   <button (click)="openModal()">View selected</button>
   <button (click)="clearSelectedItems()">Clear selected</button>
</div>
<div class="table-container">
   <app-table-component [data]="tableData" (sendCheck)="receiveItem($event)" (sendChecks)="receiveItems($event)"/>
</div>

<modal>
   <modal-title>Items selected</modal-title>
   <modal-body>
      <div><span>Items selected: </span><span [innerText]="getList().length"></span></div>
      @for(let item of items; track item.id; let i = $index){
         <div class="row">
            <div class="col">#{{i+1}}</div>
            <div class="col" [innerText]="item.name"></div>
            <div class="col">
               <button (click)="removeItemIndex(i)">Remove</button>
            </div>
         <div>
      }
   </modal-body>
   <modal-footer>
      <button (click)="closeModal()">Close</button>
   </modal-footer>
</modal>

export interface IData{
   id: string;
   name: string;
   ...
}
export interface ITableRow{
   selected: boolean;
   data: IData;
   ...
}

...

listManager = new NgxListManager<IData>();

receiveItem(item: ITableRow){
   this.listManager.insertOrRemove(item.data,item.selected);
}
receiveItems(items: ITableRow[]){
   items.forEach((item: ITableRow)=>{
      this.listManager.insertOrRemove(item.data,item.selected);
   })
}

removeItemIndex(index: number){
   this.listManager.removeIndex(index);
}
clearSelectedItems(){
   this.listManager.clear();
}
getList(): IData[]{
   return this.listManager.list();
}