NgxSuperSelect

This is a single/multiple choice drop down for Angular with search and other features!

Live Demo on Stackblitz

Features

• Multiple Selection Mode
• Single Selection Mode With Custom Default Value!
• Supports Primitive Data Types (number, string) And Complex Objects
• Search
• Select All | Invert Selection | Clear All
• Angular Forms Support
• Dark Theme And Light Theme Support

Build Status

| Build | NPM Publish | |:---:|:---:| | | |

Install

> npm i ngx-super-select

Add Imports

in the app.module.ts file import NgxSuperSelectModule like this:

  imports: [
    ...
    NgxSuperSelectModule
  ]

Usage

You can use it as simple as this:

 <ngx-super-select [dataSource]="[1,2,3]">
 </ngx-super-select>

to select options by default:

 <ngx-super-select [dataSource]="[1,2,3]" 
                   [selectedItemValues]="[2]">
 </ngx-super-select>

to disable options:

 <ngx-super-select [dataSource]="[1,2,3]" 
                   [selectedItemValues]="[2]"
                   [disabledItemValues]="[2, 3]">
 </ngx-super-select>

if you have complex object data then you need to set options:

in your component.ts file

data: { name: string }[] = [
    { name: 'hesam' },
    { name: 'kashefi' }
];

options: Partial<NgxSuperSelectOptions> = {
    actionsEnabled: true,
    displayExpr: 'name',
    valueExpr: 'name',
    placeholder: 'select',
    searchEnabled: true,
    enableDarkMode: false
}

in your component.html file:

<ngx-super-select [dataSource]="data"
                  [options]="options">

</ngx-super-select>

Use in a form:

data: { name: string }[] = [
    { name: 'hesam' },
    { name: 'kashefi' }
];

options: Partial<NgxSuperSelectOptions> = {
    actionsEnabled: true,
    displayExpr: 'name',
    valueExpr: 'name',
    placeholder: 'select',
    searchEnabled: true,
    enableDarkMode: false
}

form = new FormGroup({
  names: new FormControl([])
});

onFormSubmit() {
  console.log(this.form.value);
}

  <form [formGroup]="form"
        (submit)="onFormSubmit()">
    <ngx-super-select [dataSource]="data"
                      [options]="options"
                      formControlName="names">

    </ngx-super-select>
    <button type="submit"
            class="btn btn-primary my-2">Submit</button>
  </form>

Single Selection Mode:

Set selectionMode: 'single' in the options to enable single selection.

You can also use singleSelectionModeDefaultValue option to specify the empty value for no selection!

 <ngx-super-select formControlName="item"
                   [dataSource]="[1,2,3]"
                   [options]="{ selectionMode: 'single', singleSelectionModeDefaultValue: 0}">

  </ngx-super-select>