Angular2 Select component

froiden-angular2-select  

Getting started

$3

``
npm install --save froiden-angular2-select
`

Examples

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

Add angular2-select.css

Include angular2-select.css in your controller.
Add css in your component class

`typescript
import { Component} from "@angular/core";
.......

@Component({
....
....
styleUrls : ["./angular2-select.css"]
})

`

$3

#### 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'
}
};
`

$3

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
[settings]="selectOptions">

`

Within the component class you have to set the countries and dataObject variable. We can set select2 data using ajax or without
ajax.

$3

`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;
}
}
`

$3

`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;
}
}
`
NOTE: Always put SEARCH_VALUE in your url. We will automatically replace SEARCH_VALUE with input entered by you.

$3


`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;
}
``