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.

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:

<mtx-list [config]="listConfig" (itemClick)="onItemClick($event)"></mtx-list>

In your component class, define the list configuration (listConfig) and handle the itemClick event:

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:

<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:

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