/ngx-mat-select

adding new feature to angular material select (mat-select) includes search box, mobile view and infinite scroll

Primary LanguageTypeScriptMIT LicenseMIT

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;
            }}
  ],