Ng-super-select NPM

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

See Demo page.

Getting started

Step 1: Install `ng-super-select`:

NPM

npm install --save ng-super-select

Step 2: Import the NgSuperSelectModule:

import { NgSuperSelectModule } from 'ng-super-select';

@NgModule({
  declarations: [AppComponent],
  imports: [NgSuperSelectModule, ...],
  bootstrap: [AppComponent]
})
export class AppModule {}

Usage

Example with array of object

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

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

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

<ng-super-select  [isSearchable]="true"  [optionArray]="employee" [isMultiSelectable]="true" [bindName]="'name'"   [bindValue]="'id'"  [isDataObject]="true"  (changeSuperSelect)="changeEmployee($event)"></ng-super-select>

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

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

<ng-super-select  [isSearchable]="false"  [optionArray]="employee" [isMultiSelectable]="true" [bindName]="'name'"   [bindValue]="'id'"  [isDataObject]="true"  (changeSuperSelect)="changeEmployee($event)"></ng-super-select>

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

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

<ng-super-select  [isSearchable]="true"  [optionArray]="employee" [isMultiSelectable]="false" [bindName]="'name'"  [bindValue]="'id'"  [isDataObject]="true"  (changeSuperSelect)="changeEmployee($event)"></ng-super-select>

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

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

<ng-super-select  [isSearchable]="false"  [optionArray]="employee" [isMultiSelectable]="false" [bindName]="'name'"   [bindValue]="'id'"  [isDataObject]="true"  (changeSuperSelect)="changeEmployee($event)"></ng-super-select>

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

Example with array of string

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

@Component({...})
export class ExampleComponent {
    selectedEmployee!: string;
    employee =  [
		'Rohit Bhagat',
		'Sayon Chakraborty',
		'Pritam Paul',
		'Sumit Kumar',
		'Tamal Dutta',
		'Shivam Bhaskar',
		'Krishna Pada Jana'
	];
	changeEmployee(name: string){
		this.selectedEmployee = name;
	}
}

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

<ng-super-select  [isSearchable]="true"  [optionArray]="employee" [isMultiSelectable]="true"   [isDataObject]="false"  (changeSuperSelect)="changeEmployee($event)"></ng-super-select>

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

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

<ng-super-select  [isSearchable]="false"  [optionArray]="employee" [isMultiSelectable]="true"   [isDataObject]="false"  (changeSuperSelect)="changeEmployee($event)"></ng-super-select>

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

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

<ng-super-select  [isSearchable]="true"  [optionArray]="employee" [isMultiSelectable]="false"   [isDataObject]="false"  (changeSuperSelect)="changeEmployee($event)"></ng-super-select>

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

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

<ng-super-select  [isSearchable]="false"  [optionArray]="employee" [isMultiSelectable]="false"   [isDataObject]="false"  (changeSuperSelect)="changeEmployee($event)"></ng-super-select>

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

Example with api

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

@Component({...})
export class ExampleComponent {
	changeEmployee(data: any) {    
    this.selectedEmployee = data;
  }
}

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

<ng-super-select [isSearchable]="true" [isMultiSelectable]="true" [isDataObject]="true" [bindValue]="'id'"
  [bindName]="'title'" [apiUrl]="'https://jsonplaceholder.typicode.com/posts'"
  (changeSuperSelect)="changeEmployee($event)"></ng-super-select>

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

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

<ng-super-select [isSearchable]="true" [isMultiSelectable]="true" [isDataObject]="true" [bindValue]="'id'"
  [bindName]="'title'" [apiOnSearch]="true" [apiUrl]="'https://jsonplaceholder.typicode.com/posts?search='"
  (changeSuperSelect)="changeEmployee($event)">
</ng-super-select>

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

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

<ng-super-select [responseKey]="'entries'" [isSearchable]="true" [isMultiSelectable]="true" [isDataObject]="true"
  [bindValue]="'Link'" [bindName]="'Description'" [apiUrl]="'https://api.publicapis.org/entries'"
  (changeSuperSelect)="changeEmployee($event)"></ng-super-select>

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

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

<ng-super-select [responseKey]="'source.0.measures'" [isSearchable]="true" [isMultiSelectable]="true"
  [isDataObject]="false" [apiOnSearch]="true"
  [apiUrl]="'https://datausa.io/api/data?drilldowns=Nation&measures=Population'"
  (changeSuperSelect)="changeEmployee($event)"></ng-super-select>

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

Example with Add New Record

@Component({...})
export class ExampleComponent {

  @ViewChild('ngSuperSelect1')
  ngSuperSelect1!: NgSuperSelectComponent;
  @ViewChild('ngSuperSelect2')
  ngSuperSelect2!: NgSuperSelectComponent;
  @ViewChild('NgSuperSelectComponent')
  ngSuperSelect3!: NgSuperSelectComponent;
  @ViewChild('NgSuperSelectComponent')
  ngSuperSelect4!: NgSuperSelectComponent;
  
	changeEmployee(id: number | number[]) {
    this.selectedEmployee = id;
    alert(id);
  }

  addNewRecord(value: string, example: number) {
    alert(`We need to add a new record: ${value}`); // this will your api call for saving the new record
    switch (example) {
      case 1:
        let newDbValue1 = this.example1.length + 1;
        this.example1 = [...this.example1, { id: newDbValue1, name: value }]
        this.ngSuperSelect1.updateNewlyAddedRecord(newDbValue1, this.example1);
        break;
      case 2:
        let newDbValue2 = this.example2.length + 1;
        this.example2 = [...this.example2, { id: newDbValue2, name: value }]
        this.ngSuperSelect2.updateNewlyAddedRecord(newDbValue2, this.example2);
        break;
      default:
        break;
    }
  }
  
}

<!-- 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