A reusable Angular library for custom mat-select with search and lazy loading
npm install ngx-mat-select-advanced
bash
npm i ngx-mat-select-advanced
`
$3
| 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. |
| isClearable | boolean | true | Enable or disable the ability to clear the selected value with a cross button. When set to true, displays a clear button to reset the selection. |
| 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. |
$3
| Output | Description | Type |
| ----- | ----- | ----- |
| newOptionAdded | Emits the new option added by the user. | EventEmitter |
| valueChange | Emits the selected value whenever it changes. | EventEmitter |
$3
StackBlitz working example
Import NgxMatSelectAdvancedComponent inside the app.component.ts:
`typescript
.
.
.
import { NgxMatSelectAdvancedComponent } from 'ngx-mat-select-advanced';
@Component({
selector: 'app-root',
standalone: true,
imports: [..., NgxMatSelectAdvancedComponent],
templateUrl: './app.component.html',
styleUrl: './app.component.scss'
})
export class AppComponent {
constructor(
private fb: FormBuilder
) {
this.form = this.fb.group({
colors: ['Gray'],
});
}
form: FormGroup;
colors: string[] = ["Red", "Blue", "Green", "Yellow", "Purple", "Orange", "Pink", "Brown", "Gray", "Black", "White", "Cyan", "Magenta", "Lime", "Teal", "Olive", "Maroon", "Navy", "Gold", "Silver"];
onNewColorAdded(newColor: string): void {
console.log('New color added:', newColor);
}
ngOnInit(): void {
this.form.get('colors')?.valueChanges.pipe(
distinctUntilChanged()
).subscribe((value) => {
console.log('selected color', value);
});
}
}
`
Then, add html inside app.componet.html
`html
`
$3
* 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.
$3
To run and test the library locally:
1. Clone the repository:
`bash
git clone https://github.com/wankhedeamol20/ngx-mat-select-advanced
`
2. Navigate to the workspace:
`bash
cd ngx-mat-select-advanced
`
3. Install dependencies:
`bash
npm install
`
4. Build the library:
`bash
ng build ngx-mat-select-advanced
`
5. Link the library to a demo project for testing:
`bash
cd dist/ngx-mat-select-advanced
npm link
`
6. In your Angular demo project:
`bash
npm link ngx-mat-select-advanced
`
$3
This library supports Angular 18 and higher.
* @angular/core: >=18.2.0
* @angular/cdk: >=18.2.0
* @angular/material: >=18.2.0`