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

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 |