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
ng-super-select
:
Step 1: Install 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 |