Angular Material Select with search, lazy loading and dynamic options.

A reusable Angular library that extends Angular Material's mat-select with advanced features like search, lazy loading, and the ability to add custom options.

Features

• Search Functionality: Easily search through options in the dropdown.
• Lazy Loading: Efficiently load options in chunks to handle large datasets.
• Custom Option Addition: Add new options dynamically if they are not available.
• Cross Button: Clear the selected value with a single click.
• Accessibility: Fully accessible with proper aria-label attributes.

Installation

1npm i ngx-mat-select-advanced

Inputs

Input	Type	Default	Description
options	string[]	[]	Array of options to display in the dropdown.
label	string	'Select an option'	Label for the select component.
placeholder	string	'Search or add new'	Placeholder for the search input.
allowAddNew	boolean	true	Allow adding a new option if not found in the list.
ariaLabel	string	''	Accessibility label for the component.
pageSize	number	5	Number of options to load per lazy-loading batch.
itemSize	number	48	Set options height.
appearance	string	fill	Set form feild style 'fill' or 'outline' .
addNewLabel	string	Add	Set label for new option.
noOptionsLabel	string	No options available	Set label for no options.
validators	array	[]	Set ractive form validators.

Outputs

Output	Description	Type
newOptionAdded	Emits the new option added by the user.	EventEmitter<string>
valueChange	Emits the selected value whenever it changes.	EventEmitter<string>

Usage

StackBlitz working example

Import NgxMatSelectAdvancedComponent inside the app.component.ts:

1.
2.
3.
4import { NgxMatSelectAdvancedComponent } from 'ngx-mat-select-advanced';
5
6@Component({
7  selector: 'app-root',
8  standalone: true,
9  imports: [..., NgxMatSelectAdvancedComponent],
10  templateUrl: './app.component.html',
11  styleUrl: './app.component.scss'
12})
13export class AppComponent {
14
15  constructor(
16    private fb: FormBuilder
17  ) {
18    this.form = this.fb.group({
19      colors: ['Gray'],
20    });
21  }
22
23  form: FormGroup;
24
25  colors: string[] = ["Red", "Blue", "Green", "Yellow", "Purple", "Orange", "Pink", "Brown", "Gray", "Black", "White", "Cyan", "Magenta", "Lime", "Teal", "Olive", "Maroon", "Navy", "Gold", "Silver"];
26
27  onNewColorAdded(newColor: string): void {
28    console.log('New color added:', newColor);
29  }
30
31  ngOnInit(): void {
32
33    this.form.get('colors')?.valueChanges.pipe(
34        distinctUntilChanged()
35    ).subscribe((value) => {
36      console.log('selected color', value);
37    });
38
39  }
40}

Then, add html inside app.componet.html

1  <form [formGroup]="form">
2      <ngx-mat-select-advanced 
3        formControlName="colors" 
4        ngDefaultControl 
5        [options]="colors" 
6        [label]="'Colors'"
7        [placeholder]="'Search or add a color'" 
8        [allowAddNew]="true" 
9        [defaultValue]="'Gray'" 
10        [pageSize]="5"
11        [itemSize]="48" 
12        [appearance]="'outline'" 
13        [addNewLabel]="'Add'" 
14        (newOptionAdded)="onNewColorAdded($event)"
15        (valueChange)="onColorValueChange($event)">
16      </ngx-mat-select-advanced>
17  </form>

Advanced Features

• Lazy Loading: The library automatically handles lazy loading. Options are loaded in chunks as the user scrolls to the bottom of the dropdown.
• Adding Custom Options: If the user enters a value not in the list, the library provides an option to add it dynamically. To disable this, set allowAddNew to false.

Development

To run and test the library locally:

1. Clone the repository:

1git clone https://github.com/wankhedeamol20/ngx-mat-select-advanced

2. Navigate to the workspace:

1cd ngx-mat-select-advanced

3. Install dependencies:

1npm install

4. Build the library:

1ng build ngx-mat-select-advanced

5. Link the library to a demo project for testing:

1cd dist/ngx-mat-select-advanced
2npm link

6. In your Angular demo project:

1npm link ngx-mat-select-advanced

Compatibility

This library supports Angular 18 and higher.

• @angular/core: >=18.2.0
• @angular/cdk: >=18.2.0
• @angular/material: >=18.2.0

Contributions

Contributions are welcome! If you encounter any issues or have feature requests, please open an issue or create a pull request.

License

This library is licensed under the MIT License. See the LICENSE file for more details.