ngx-mat-combobox v1.0.3

NgxMatCombobox

Customizable Combobox component for Angular Material

Demo + code examples

Features

• Single & Multiple selection :)
• Autocomplete
• Chips
• Custom templates for options, header, footer, loading overlay, no options etc..

TODO

• Tests
• Documentation
• Theming support

Installation

npm -i ngx-mat-combobox

Example

For more details see examples or projects/demo application

Components

• ngx-mat-combobox

Exported as ngxMatCombobox

Directives

• ngxMatComboboxInput or ngx-mat-combobox-input

Exported as ngxMatComboboxInput

• ngxMatComboboxRemove or ngx-mat-combobox-remove

Exported as ngxMatComboboxRemove.

Custom content templates

• ngxMatComboboxOption or ngx-mat-combobox-option

• ngxMatComboboxNoOption or ngx-mat-combobox-no-option

• ngxMatComboboxDisplay or ngx-mat-combobox-display

• ngxMatComboboxHeader or ngx-mat-combobox-header

• ngxMatComboboxFooter or ngx-mat-combobox-footer

• ngxMatComboboxLoading or ngx-mat-combobox-loading

Interfaces

Function to access object options properties.

export type NgxMatComboboxAccessorFn = (option: any) => any;

Function to map model values to the option objects.

export type NgxMatComboboxMapOptionsFn = (value: any[], options: any[]) => Observable<any[]> | any[];

Autocomplete filter function.

export type NgxMatComboboxFilterOptionsFn = (query: string, options: any[]) => Observable<any[]> | any[];

Function to compare two options. By default valueAccessor is used internally.

export type NgxMatComboboxCompareOptionsFn = (o1: any, o2: any) => boolean;

Defaults

export interface NgxMatComboboxDefaultOptions {
  valueAccessor?: string | NgxMatComboboxAccessorFn;
  labelAccessor?: string | NgxMatComboboxAccessorFn;
  displayAccessor?: string | NgxMatComboboxAccessorFn;
  disabledAccessor?: string | NgxMatComboboxAccessorFn;

  showToggleTrigger?: boolean;

  showLoadingSpinner?: boolean;
  loadingSpinnerDiameter?: number;
  loadingSpinnerStrokeWidth?: number;
  loadingSpinnerColor?: string;

  autocompleteMinChars?: number;
  autocompleteDebounceInterval?: number;

  noWrap?: boolean;
  noOptionText?: string;

  dropdownClass?: string,
  dropdownMatchFieldWidth?: boolean;
  dropdownOffsetX?: number;
  dropdownOffsetY?: number;

  dropdownKeyNavWrap?: boolean;
  dropdownKeyNavHomeAndEnd?: boolean;
  dropdownKeyNavTypeAhead?: boolean;

  disableOptionsRipple?: boolean;
  disableChipsRipple?: boolean;
  disableChipsRemove?: boolean;
}

Global configuration

  providers: [
    //...
    {
      provide: NGX_MAT_COMBOBOX_DEFAULT_OPTIONS, useValue: {
            autocompleteMinChars: 3,
            autocompleteDebounceInterval: 250,
            loadingSpinnerStrokeWidth: 4,
            loadingSpinnerColor: 'accent',
            showToggleTrigger: false,
            dropdownMatchFieldWidth: false,
          } as NgxMatComboboxDefaultOptions
    },
    //...
  ]