Mat List Shared Component

The Mat List Shared Component is a customizable, reusable Angular component that extends the functionality of Angular Material's mat-select. It provides features such as infinite scrolling, search capability, and dynamic option rendering.

Features

• Infinite scrolling for large datasets
• Optional search functionality
• Support for single and multiple selections
• Customizable display options
• Integration with Angular Reactive Forms
• Edit mode support

Installation

1. Ensure you have Angular Material installed in your project.
2. Copy the mat-list-shared.component.ts and mat-list-shared.component.html files into your project.
3. Import the MatListSharedComponent in your module file and add it to the declarations array.

Usage

To use the Mat List Shared Component in your Angular application:

1. Import the necessary modules in your component:

import { CustomMatList } from './path-to/mat-list-shared.model';
import { FormBuilder, FormGroup } from '@angular/forms';

2. In your component class, set up the required properties:

reservedForm: FormGroup;
matList: CustomMatList;

constructor(private fb: FormBuilder) {
  this.reservedForm = this.fb.group({
    // Your form controls here
  });

  this.matList = {
    option: {
      text: 'Select an option',
      formControlName: 'yourControlName',
      displayName: 'name', // The property of your data object to display
      isRequired: true,
      svgIcon: 'your-icon'
    },
    searchAble: true,
    isMultiSelect: false,
    typeAction: 'create', // or 'edit'
    filtre: {
      take: 5,
      skip: 0,
      id: undefined
    },
    service: yourDataService // Service that implements getAll method
  };
}

3. In your template, use the component:

<lib-mat-list-shared
  [reservedForm]="reservedForm"
  [matList]="matList"
  (selectionChange)="onSelectionChange($event)"
  (valueChange)="onValueChange($event)">
</lib-mat-list-shared>

Component Inputs

reservedForm: FormGroup - The parent form group
matList: CustomMatList - Configuration object for the component

Component Outputs

selectionChange: EventEmitter<any> - Emits when the selection changes
valueChange: EventEmitter<any> - Emits when the value changes

CustomMatList Interface

interface CustomMatList {
  option: {
    text: string;
    formControlName: string;
    displayName: string;
    isRequired: boolean;
    svgIcon: string;
    optionId?: any;
    optionLibelle?: string;
  };
  searchAble: boolean;
  isMultiSelect: boolean;
  typeAction: 'create' | 'edit';
  filtre: {
    take: number;
    skip: number;
    id: any;
  };
  service: any; // Should have a getAll method
  isEdit?: boolean;
}

Customization

You can customize the appearance and behavior of the component by modifying the CustomMatList object you pass to it.

Full Ex:

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { CustomMatList } from './path-to/mat-list-shared.model';
import { YourDataService } from './path-to/your-data.service';

@Component({
  selector: 'app-example',
  template: `
    <form [formGroup]="exampleForm">
      <lib-mat-list-shared
        [reservedForm]="exampleForm"
        [matList]="countryList"
        (selectionChange)="onCountrySelectionChange($event)"
        (valueChange)="onCountryValueChange($event)">
      </lib-mat-list-shared>
    </form>
  `
})
export class ExampleComponent implements OnInit {
  exampleForm: FormGroup;
  countryList: CustomMatList;

  constructor(
    private fb: FormBuilder,
    private dataService: YourDataService
  ) {}

  ngOnInit() {
    this.initForm();
    this.setupCountryList();
  }

  initForm() {
    this.exampleForm = this.fb.group({
      country: ['', Validators.required]
    });
  }

  setupCountryList() {
    this.countryList = {
      option: {
        text: 'Select a country',
        formControlName: 'country',
        displayName: 'name',
        isRequired: true,
        svgIcon: 'globe-icon'
      },
      searchAble: true,
      isMultiSelect: false,
      typeAction: 'create',
      filtre: {
        take: 10,
        skip: 0,
        id: undefined
      },
      service: this.dataService
    };
  }

  onCountrySelectionChange(event: any) {
    console.log('Selection changed:', event);
  }

  onCountryValueChange(event: any) {
    console.log('Value changed:', event);
  }
}

In this example:

We import the necessary dependencies, including the CustomMatList interface and a hypothetical data service. In the component's template, we use the lib-mat-list-shared component, binding it to our form and configuration object. In the component class:

We create a FormGroup called exampleForm with a 'country' control. We set up the countryList configuration object of type CustomMatList. We implement onCountrySelectionChange and onCountryValueChange methods to handle the component's output events.

The YourDataService should implement a getAll method that returns an Observable. This method will be called by the Mat List Shared Component to fetch data. For example:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class YourDataService {
  constructor(private http: HttpClient) {}

  getAll(params: any): Observable<any> {
    return this.http.get('your-api-endpoint', { params });
  }
}

Remember to provide YourDataService in your module or component. This example demonstrates how to integrate the Mat List Shared Component into a form, configure it for a specific use case (selecting a country), and handle its events.