NgxMatSelect

It is an independent component like mat-select and a solution for handling
SearchBox, VirtualScroll and InfiniteScroll which the Angular material select-box does not support them by it-self.

Extra Advantages that you'll gain more than using mat-select:

* Searchable in the both client and server side modes
* Virtual Scroll in the both client and server side modes as well
* Infinite Scroll in the server side mode

RLT support (use dir='rtl' in html tag)

Documents Online


Customize Online


Source Code
Stackblitz

Version compatibility

| Angular Material | NgxMatSelect |
|------------------|---------------|
| 16.x.x | >= 16 |
| 15.x.x | >= 15 |
| 14.x.x | >= 14 |

Installation Guide

* the first step is to initial ngx-mat-select theme like the other
Angular Material Components

for example add the following line in the styles.scss file:

@use "ngx-mat-select" as ngxMatSelect;
or
@use "node_modules/ngx-mat-select" as ngxMatSelect;

then apply your Angular Material Theme to the ngxMatSelect theme

@include ngxMatSelect.theme($your-theme);
@include ngxMatSelect.typography($your-typography);

if you want to use dark-theme and light-theme:

.darkMode {
...
@include ngxMatSelect.theme($your-dark-theme);
}


* The second step is to add NgxMatSelectModule into your Module

import {NgxMatSelectModule} from "ngx-mat-select";
...
@NgModule({
imports: [
...
NgxMatSelectModule
...
]
})

you can define some global default configs:

providers: [
{
provide: NGX_MAT_SELECT_CONFIG,
useValue: {
viewType?: NgxMatSelectViewType;
hasBackButton?: boolean;
multipleDisplay?: NgxMatSelectMultipleDisplay;
dataKey?: string;
optionLabel?: string;
optionValue?: string;
panelWidth?: string | number | null;
overlayPanelClass?: string | string[];
optionHeight?: number;
panelHeight?: number;
}}
],