Angular2 ajax based replacement for select boxes
npm install froiden-angular2-select```
npm install --save froiden-angular2-select
1. Without Ajax Single Select
2. Without Ajax Multi Select
3. With Ajax Single Select
4. With Ajax Multi Select
5. Update with Ajax Multi Select
`typescript
import { Component} from "@angular/core";
.......
@Component({
....
....
styleUrls : ["./angular2-select.css"]
})
`
#### Systemjs
In systemjs.config.js add froiden-angular2-select to map and package:
`javascript
var map = {
// others...,
'froiden-angular2-select': 'node_modules/froiden-angular2-select'
};
var packages = {
// others...,
'froiden-angular2-select': {
main: 'angular2-select.js',
defaultExtension: 'js'
}
};
`
Import the SelectModule and define it as one of the imports of your
application module:
`typescript
import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {FormsModule} from '@angular/forms';
import {SelectModule} from 'froiden-angular2-select/angular2-select';
import {AppComponent} from './app.component';
@NgModule({
imports: [
BrowserModule,
FormsModule,
SelectModule
],
declarations: [
AppComponent
],
bootstrap: [
AppComponent
]
})
export class AppModule { }
`
Add the following HTML to the component template in which you want to use the
select component:
`html`
Within the component class you have to set the countries and dataObject variable. We can set select2 data using ajax or without
ajax.
`typescript`
public countries : any;
private selectOptions = {
"idField" : "id",
"textField" : "text",
"multiple" : true,
"allowClear" : true,
"debounceTime" : 300,
"placeholder" : "Select countries...",
data : [
{
"id" : 1,
"text" : "India"
},
{
"id" : 2,
"text" : "Bangladesh"
},
.....
],
processResults : (modelObject : any) => {
let selectValues : Array
modelObject.forEach((item : {id : number, text : string}) => {
selectValues.push({
id : item.id,
text : item.text,
});
});
return selectValues;
}
}
`typescript`
public countries : any;
private selectOptions = {
"idField" : "id",
"textField" : "text",
"multiple" : true,
"allowClear" : true,
"debounceTime" : 300,
"placeholder" : "Select countries...",
ajax : {
"requestType" : "get",
"url" : 'http://demo.com/api/countries?fields=id|name&limit=-1&filters={"name":{"type":"search","value":"SEARCH_VALUE"}}',
"authToken": AUTH TOKEN IF REQUIRED,
responseData : (response : any) => {
let currentValue = response.data;
let value : Array
currentValue.forEach((item : {id : number, name : string}) => {
value.push({
id : item.id,
text: item.name
});
});
return value;
}
},
processResults : (modelObject : any) => {
let selectValues : Array
modelObject.forEach((item : {id : number, text : string}) => {
selectValues.push({
id : item.id,
text : item.text,
});
});
return selectValues;
}
}SEARCH_VALUE
NOTE: Always put in your url. We will automatically replace SEARCH_VALUE with input entered by you.
typescript
public countries : any = [{
"countryCode" : '1',
"countryName" : "India"
}];
private selectOptions = {
"idField" : "countryCode",
"textField" : "countryName",
"multiple" : true,
"allowClear" : true,
"debounceTime" : 300,
"placeholder" : "Select countries...",
ajax : {
"requestType" : "get",
"url" : 'http://demo.com/api/countries?fields=id|name&limit=-1&filters={"name":{"type":"search","value":"SEARCH_VALUE"}}',
"authToken": AUTH TOKEN IF REQUIRED,
responseData : (response : any) => {
let currentValue = response.data;
let value : Array = [];
currentValue.forEach((item : {isoCode : string, name : string}) => {
value.push({
countryCode : item.isoCode,
countryName: item.name
});
});
return value;
}
},
processResults : (modelObject : any) => {
let selectValues : Array = [];
modelObject.forEach((item : {countryCode : string, countryName : string}) => {
selectValues.push({
countryCode : item.countryCode,
countryName : item.countryName,
});
});
return selectValues;
}
}
`
NOTE: Always put SEARCH_VALUE in your url. We will automatically replace SEARCH_VALUE with input entered by you.[(ngModel)]
You need to set [(ngModel)] with your Component variable for which you want two way data binding.Input properties (selectOptions)
$3
default - id
String value to set id field.
$3
default - text
String value to set text field.
$3
true/false
A boolean to choose between single and multi-select.
$3
true/false
If set to true, a button with a cross that can be used to clear the currently
selected option is shown if an option is selected.
$3
Integer value
Time for which you want to wait to appear select options.
$3
default: ''
The placeholder value is shown if no option is selected.
$3
Callback function to set ngModel array of object.
For single select:
`
processResults : (modelObject : any) => {
let selectValues : Array = [];
selectValues.push({
id : item.id,
textValue : item.text,
});
return selectValues;
}
`For multiple select :
`
processResults : (modelObject : any) => {
let selectValues : Array = [];
modelObject.forEach((item : {id : number, text : string}) => {
selectValues.push({
id : item.id,
textValue : item.text,
});
});
return selectValues;
}
`Input properties (selectOptions.ajax)
If you want to use ajax request to fetch data from url and want to render this data into your select option then we will use
following properties:$3
get/post
Request type for url address.
$3
string
URL address from where you will fetch data for select options.
NOTE: Always put
SEARCH_VALUE in your url. We will automatically replace SEARCH_VALUE with input entered by you.$3
string
If your url endpoint uses auth token then assign to authToken
$3
Callback function to set select option values:
`
responseData : (response : any) => {
let currentValue = response.data;
let value : Array = [];
currentValue.forEach((item : {id : number, name : string}) => {
value.push({
id : item.id,
text: item.name
});
});
return value;
}
``