Angular ng-super-select - Lightweight all in one UI Select, Multiselect and Autocomplete

See Demo page.

| Angular| ng-super-select|autocomplete|multi-select|searchable-dropdown|

---

Getting started

Step 1: Install ng-super-select:

NPM

1npm install --save ng-super-select

Step 2: Import the NgSuperSelectModule:

1import { NgSuperSelectModule } from 'ng-super-select';
2
3@NgModule({
4  declarations: [AppComponent],
5  imports: [NgSuperSelectModule, ...],
6  bootstrap: [AppComponent]
7})
8export class AppModule {}

Usage

Example with array of object

Define options in your consuming component if you are using isDataObject as true:

1@Component({...})
2export class ExampleComponent {
3    selectedEmployee!: number;
4    employee =  [
5		{ id:  1, name:  'Rohit Bhagat'  },
6		{ id:  2, name:  'Sayon Chakraborty'  },
7		{ id:  3, name:  'Pritam Paul'  },
8		{ id:  4, name:  'Sumit Kumar'  },
9		{ id:  6, name:  'Tamal Dutta'  },
10		{ id:  7, name:  'Shivam Bhaskar'  },
11		{ id:  8, name:  'Krishna Pada Jana'  }
12	];
13	changeEmployee(id: number){
14		this.selectedEmployee = id;
15	}
16}

In template use ng-super-select component with your options if you use searchable & multi-selectable

1<ng-super-select  [isSearchable]="true"  [optionArray]="employee" [isMultiSelectable]="true" [bindName]="'name'"   [bindValue]="'id'"  [isDataObject]="true"  (changeSuperSelect)="changeEmployee($event)"></ng-super-select>
2
3/* 
4For pre select you can use preSelectData 
5<ng-super-select [preSelectData]="[1,2]" [isSearchable]="true"  [optionArray]="employee" [isMultiSelectable]="true" [bindName]="'name'"   [bindValue]="'id'"  [isDataObject]="true"  (changeSuperSelect)="changeEmployee($event)"></ng-super-select>
6*/

In template use ng-super-select component with your options if you use not-searchable but multi-selectable

1<ng-super-select  [isSearchable]="false"  [optionArray]="employee" [isMultiSelectable]="true" [bindName]="'name'"   [bindValue]="'id'"  [isDataObject]="true"  (changeSuperSelect)="changeEmployee($event)"></ng-super-select>
2
3/* 
4For pre select you can use preSelectData 
5<ng-super-select [preSelectData]="[1,2]" [isSearchable]="false"  [optionArray]="employee" [isMultiSelectable]="true" [bindName]="'name'"   [bindValue]="'id'"  [isDataObject]="true"  (changeSuperSelect)="changeEmployee($event)"></ng-super-select>
6*/

In template use ng-super-select component with your options if you use searchable but not multi-selectable

1<ng-super-select  [isSearchable]="true"  [optionArray]="employee" [isMultiSelectable]="false" [bindName]="'name'"  [bindValue]="'id'"  [isDataObject]="true"  (changeSuperSelect)="changeEmployee($event)"></ng-super-select>
2
3/* 
4For pre select you can use preSelectData 
5<ng-super-select [preSelectData]="1" [isSearchable]="true"  [optionArray]="employee" [isMultiSelectable]="false" [bindName]="'name'"  [bindValue]="'id'"  [isDataObject]="true"  (changeSuperSelect)="changeEmployee($event)"></ng-super-select>
6*/

In template use ng-super-select component with your options if you use not-searchable and not multi-selectable

1<ng-super-select  [isSearchable]="false"  [optionArray]="employee" [isMultiSelectable]="false" [bindName]="'name'"   [bindValue]="'id'"  [isDataObject]="true"  (changeSuperSelect)="changeEmployee($event)"></ng-super-select>
2
3/* 
4For pre select you can use preSelectData 
5<ng-super-select [preSelectData]="1" [isSearchable]="false"  [optionArray]="employee" [isMultiSelectable]="false" [bindName]="'name'"   [bindValue]="'id'"  [isDataObject]="true"  (changeSuperSelect)="changeEmployee($event)"></ng-super-select>
6*/

Example with array of string

Define options in your consuming component if you are using isDataObject as false:

1@Component({...})
2export class ExampleComponent {
3    selectedEmployee!: string;
4    employee =  [
5		'Rohit Bhagat',
6		'Sayon Chakraborty',
7		'Pritam Paul',
8		'Sumit Kumar',
9		'Tamal Dutta',
10		'Shivam Bhaskar',
11		'Krishna Pada Jana'
12	];
13	changeEmployee(name: string){
14		this.selectedEmployee = name;
15	}
16}

In template use ng-super-select component with your options if you use searchable & multi-selectable

1<ng-super-select  [isSearchable]="true"  [optionArray]="employee" [isMultiSelectable]="true"   [isDataObject]="false"  (changeSuperSelect)="changeEmployee($event)"></ng-super-select>
2
3/* 
4For pre select you can use preSelectData 
5<ng-super-select [preSelectData]="['Rohit Bhagat', 'Sayon Chakraborty']" [isSearchable]="true"  [optionArray]="employee" [isMultiSelectable]="true"   [isDataObject]="false"  (changeSuperSelect)="changeEmployee($event)"></ng-super-select>
6*/

In template use ng-super-select component with your options if you use not-searchable but multi-selectable

1<ng-super-select  [isSearchable]="false"  [optionArray]="employee" [isMultiSelectable]="true"   [isDataObject]="false"  (changeSuperSelect)="changeEmployee($event)"></ng-super-select>
2
3/* 
4For pre select you can use preSelectData 
5<ng-super-select  [preSelectData]="['Rohit Bhagat', 'Sayon Chakraborty']" [isSearchable]="false"  [optionArray]="employee" [isMultiSelectable]="true"   [isDataObject]="false"  (changeSuperSelect)="changeEmployee($event)"></ng-super-select>
6*/

In template use ng-super-select component with your options if you use searchable but not multi-selectable

1<ng-super-select  [isSearchable]="true"  [optionArray]="employee" [isMultiSelectable]="false"   [isDataObject]="false"  (changeSuperSelect)="changeEmployee($event)"></ng-super-select>
2
3/* 
4For pre select you can use preSelectData 
5<ng-super-select [preSelectData]="'Rohit Bhagat'"  [isSearchable]="true"  [optionArray]="employee" [isMultiSelectable]="false"   [isDataObject]="false"  (changeSuperSelect)="changeEmployee($event)"></ng-super-select>
6*/

In template use ng-super-select component with your options if you use not-searchable and not multi-selectable

1<ng-super-select  [isSearchable]="false"  [optionArray]="employee" [isMultiSelectable]="false"   [isDataObject]="false"  (changeSuperSelect)="changeEmployee($event)"></ng-super-select>
2
3/* 
4For pre select you can use preSelectData 
5<ng-super-select [preSelectData]="'Rohit Bhagat'" [isSearchable]="false"  [optionArray]="employee" [isMultiSelectable]="false"   [isDataObject]="false"  (changeSuperSelect)="changeEmployee($event)"></ng-super-select>
6*/

Example with api

Add a function to listen change event in your component if you are using apiUrl:

1@Component({...})
2export class ExampleComponent {
3	changeEmployee(data: any) {    
4    this.selectedEmployee = data;
5  }
6}

In template use ng-super-select component if you are using api for showing option and in response you get array

1
2<ng-super-select [isSearchable]="true" [isMultiSelectable]="true" [isDataObject]="true" [bindValue]="'id'"
3  [bindName]="'title'" [apiUrl]="'https://jsonplaceholder.typicode.com/posts'"
4  (changeSuperSelect)="changeEmployee($event)"></ng-super-select>
5
6/* 
7For pre select you can use preSelectData 
8<ng-super-select [preSelectData]="[1, 2]" [isSearchable]="true" [isMultiSelectable]="true" [isDataObject]="true"
9  [bindValue]="'id'" [bindName]="'title'" [apiUrl]="'https://jsonplaceholder.typicode.com/posts'"
10  (changeSuperSelect)="changeEmployee($event)"></ng-super-select>
11*/
12

In template use ng-super-select component if you are using api for showing option and in response you get array and you want api should call on every input

1<ng-super-select [isSearchable]="true" [isMultiSelectable]="true" [isDataObject]="true" [bindValue]="'id'"
2  [bindName]="'title'" [apiOnSearch]="true" [apiUrl]="'https://jsonplaceholder.typicode.com/posts?search='"
3  (changeSuperSelect)="changeEmployee($event)">
4</ng-super-select>
5
6/* 
7For pre select you can use preSelectData 
8<ng-super-select [preSelectData]="[1, 2]" [isSearchable]="true" [isMultiSelectable]="true" [isDataObject]="true"
9  [bindValue]="'id'" [bindName]="'title'" [apiOnSearch]="true"
10  [apiUrl]="'https://jsonplaceholder.typicode.com/posts?search='" (changeSuperSelect)="changeEmployee($event)">
11</ng-super-select>
12*/

In template use ng-super-select component if you are using api for showing option and in response you get object and and inside that object there is array for showing option

entries=>response['entries']=>response.entries

1<ng-super-select [responseKey]="'entries'" [isSearchable]="true" [isMultiSelectable]="true" [isDataObject]="true"
2  [bindValue]="'Link'" [bindName]="'Description'" [apiUrl]="'https://api.publicapis.org/entries'"
3  (changeSuperSelect)="changeEmployee($event)"></ng-super-select>
4
5/* 
6For pre select you can use preSelectData 
7<ng-super-select [preSelectData]="['https://alexwohlbruck.github.io/cat-facts/']" [responseKey]="'entries'" [isSearchable]="true" [isMultiSelectable]="true" [isDataObject]="true"
8  [bindValue]="'Link'" [bindName]="'Description'" [apiUrl]="'https://api.publicapis.org/entries'"
9  (changeSuperSelect)="changeEmployee($event)"></ng-super-select>
10*/

In template use ng-super-select component if you are using api for showing option and in response you get object and and inside that object there is array for showing option

source.0.measures=>response['source'][0]['measures']=>response.source[0].measures

1<ng-super-select [responseKey]="'source.0.measures'" [isSearchable]="true" [isMultiSelectable]="true"
2  [isDataObject]="false" [apiOnSearch]="true"
3  [apiUrl]="'https://datausa.io/api/data?drilldowns=Nation&measures=Population'"
4  (changeSuperSelect)="changeEmployee($event)"></ng-super-select>
5
6/* 
7For pre select you can use preSelectData 
8<ng-super-select [preSelectData]="['Population']" [responseKey]="'source.0.measures'" [isSearchable]="true" [isMultiSelectable]="true"
9  [isDataObject]="false" [apiOnSearch]="true"
10  [apiUrl]="'https://datausa.io/api/data?drilldowns=Nation&measures=Population'"
11  (changeSuperSelect)="changeEmployee($event)"></ng-super-select>
12*/

Example with Add New Record

1@Component({...})
2export class ExampleComponent {
3
4  @ViewChild('ngSuperSelect1')
5  ngSuperSelect1!: NgSuperSelectComponent;
6  @ViewChild('ngSuperSelect2')
7  ngSuperSelect2!: NgSuperSelectComponent;
8  @ViewChild('NgSuperSelectComponent')
9  ngSuperSelect3!: NgSuperSelectComponent;
10  @ViewChild('NgSuperSelectComponent')
11  ngSuperSelect4!: NgSuperSelectComponent;
12  
13	changeEmployee(id: number | number[]) {
14    this.selectedEmployee = id;
15    alert(id);
16  }
17
18  addNewRecord(value: string, example: number) {
19    alert(`We need to add a new record: ${value}`); // this will your api call for saving the new record
20    switch (example) {
21      case 1:
22        let newDbValue1 = this.example1.length + 1;
23        this.example1 = [...this.example1, { id: newDbValue1, name: value }]
24        this.ngSuperSelect1.updateNewlyAddedRecord(newDbValue1, this.example1);
25        break;
26      case 2:
27        let newDbValue2 = this.example2.length + 1;
28        this.example2 = [...this.example2, { id: newDbValue2, name: value }]
29        this.ngSuperSelect2.updateNewlyAddedRecord(newDbValue2, this.example2);
30        break;
31      default:
32        break;
33    }
34  }
35  
36}
37
38

<!-- Example for multi selectable & array of object -->
<ng-super-select [isSearchable]="true" [optionArray]="example1" [isMultiSelectable]="true" [bindName]="'name'"
  [bindValue]="'id'" #ngSuperSelect1 [addNewRecordRequired]="true" (addNewRecord)="addNewRecord($event, 1)"
  [isDataObject]="true" (changeSuperSelect)="changeEmployee($event)"></ng-super-select>

<!-- Example for single selectable & array of object -->
<ng-super-select #ngSuperSelect2 [isSearchable]="true" [optionArray]="example2" [isMultiSelectable]="false"
  [bindName]="'name'" [bindValue]="'id'" [addNewRecordRequired]="true" (addNewRecord)="addNewRecord($event, 2)"
  [isDataObject]="true" (changeSuperSelect)="changeEmployee($event)"></ng-super-select>

<!-- Example for single selectable & array of string/number -->
<ng-super-select [isSearchable]="true" [optionArray]="example3" [isMultiSelectable]="true" [addNewRecordRequired]="true"
  (addNewRecord)="addNewRecord($event, 3)" [isDataObject]="false"
  (changeSuperSelect)="changeEmployee($event)"></ng-super-select>

<!-- Example for single selectable & array of string/number -->
<ng-super-select [isSearchable]="true" [optionArray]="example4" [isMultiSelectable]="false"
  [addNewRecordRequired]="true" (addNewRecord)="addNewRecord($event, 4)" (addNewRecord)="addNewRecord($event, 4)"
  [isDataObject]="false" (changeSuperSelect)="changeEmployee($event)"></ng-super-select>

API

Inputs

Input	Type	Default	Required	Description
placeholder	string	if searchable then Type here to search otherwise Please select a option	no	What label you want to show
preSelectData	number[] or string[] or string or number	null if isMultiSelectable true otherwise []	no	If you want to pre select any option(s)
noOptionMessage	string	No data available	no	If there is no data in then what message you wnat to show
optionArray	array	[]	no	To show options
isSearchable	string	false	no	Is search required for the select or not
bindValue	string	null	yes (if you didn't pass isDataObject or isDataObject=true)	What value you want, after select the data
bindName	string	null	yes (if you didn't pass isDataObject or isDataObject=true)	What value you want to display in option
isMultiSelectable	boolean	false	no	More than one option can be choosen
isDataObject	boolean	true	false	If your arary is array of object then pass true or leave it otherwise pass false
showDoneButton	boolean	true	no	It will shown only for multi selectable dropdowns and if you want to hide then pass false
disable	boolean	false	no	It will make the select disable
apiUrl	string		no	If you provide this parameter then option will shown based on the api response
responseKey	string		no	Provide if you are using apiUrl & array is coming inside the object in api response
apiOnSearch	boolean	false	no	If you want api call only one time then use false or didn't pass it and if you want api call on search(Typing) then pass true
delay	number	400	no	How much time(milisecond) it should wait to check whether typing is complete or not
addNewRecordRequired	string	false	no	To show add new record option instead of no record option
addNewRecordLabel	string	Add new record:	no	To give custom label

Outputs

Output	Description
(changeSuperSelect)	This will triggered when selection value will change & you get the selected value(s)
(addNewRecord)	This will triggered when you clicked on the add new record option it will also provide the searched value as a parameter