npm package: @ng-zi/extensions-list
Description: Angular Material Extensions for list
Latest version: 0.0.2

## MtxList Component Overview

The `mtx-list` component provides a flexible way to display lists of items using Angular Material 18 styling and functionality.

## Features

- **Item Rendering**: Display items in a list format with customizable templates for item content.
- **Selection**: Supports single and multiple item selection with visual feedback.
- **Disabled Items**: Ability to disable specific items within the list.
- **Custom Templates**: Allows users to define custom templates for list item content.
- **Click Events**: Emits events when list items are clicked, providing flexibility for interaction handling.
- **Styling**: Utilizes Angular Material theming and styling capabilities for consistent design.

## Usage

### Installation

To use `mtx-list` in your Angular project, ensure you have Angular Material 18 installed and configured. Import `MtxListModule` into your feature module where the list will be used.

```typescript
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MtxListModule } from 'path/to/mtx-list.module';

@NgModule({
  declarations: [YourComponent],
  imports: [
    CommonModule,
    MtxListModule
  ]
})
export class YourModule { }
```

### Basic Example

Use the `mtx-list` component in your template to render a basic list:

```html
<mtx-list [config]="listConfig" (itemClick)="onItemClick($event)"></mtx-list>
```

In your component class, define the list configuration (`listConfig`) and handle the `itemClick` event:

```typescript
import { Component } from '@angular/core';
import { MtxListConfig } from 'path/to/list.config';

@Component({
  selector: 'your-component',
  templateUrl: './your-component.html',
  styleUrls: ['./your-component.scss']
})
export class YourComponent {
  listConfig: MtxListConfig = {
    items: [
      { title: 'Item 1', subtitle: 'Subtitle 1' },
      { title: 'Item 2', subtitle: 'Subtitle 2' }
    ]
  };

  onItemClick(item: any) {
    console.log('Item clicked:', item);
    // Handle item click logic here
  }
}
```

### Advanced Usage

#### Custom Templates

You can provide custom templates for rendering list items:

```html
<mtx-list [config]="listConfig">
  <ng-template let-item>
    <h3>{{ item.title }}</h3>
    <p>{{ item.subtitle }}</p>
    <button mat-icon-button (click)="deleteItem(item)">
      <mat-icon>delete</mat-icon>
    </button>
  </ng-template>
</mtx-list>
```

#### Selection

Enable selection mode to allow users to select items:

```html
<mtx-list [config]="listConfig" selectable multiple (itemClick)="onItemClick($event)">
</mtx-list>
```

### API

#### Inputs

- **config**: `MtxListConfig` - Configuration object for the list component.
  - `items`: `Array<{ title: string, subtitle: string, disabled?: boolean }>` - Array of items to display in the list.
  - `selectable`: `boolean` - Whether items in the list can be selected.
  - `multiple`: `boolean` - Whether multiple items can be selected at once.
  - `itemTemplate`: `TemplateRef<any>` - Optional custom template for rendering list items.

#### Outputs

- **itemClick**: `EventEmitter<any>` - Event emitted when a list item is clicked.