Value binding in EJ2 Angular MultiSelect component

26 Aug 20257 minutes to read

Value binding in the MultiSelect component allows you to associate data values with each list item, enabling efficient management and retrieval of selected values programmatically. The MultiSelect component provides flexibility in binding both primitive data types and complex objects to meet various application requirements.

Binding Primitive Data Types

The MultiSelect Dropdown control provides flexible binding capabilities for primitive data types like strings and numbers. You can effortlessly bind local primitive data arrays, fetch and bind data from remote sources, and even custom data binding to suit specific requirements. Bind the value of primitive data to the value property of the MultiSelect.

Primitive data types include:

  • String
  • Number
  • Boolean
  • Null

The following sample demonstrates preselected values for primitive data types:

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { FormsModule } from '@angular/forms'
import { MultiSelectModule } from '@syncfusion/ej2-angular-dropdowns'



import { Component } from '@angular/core';
import { MultiSelectComponent } from '@syncfusion/ej2-angular-dropdowns';


@Component({
imports: [
        FormsModule,MultiSelectModule
    ],


standalone: true,
    selector: 'app-root',
    // specifies the virtual-scroll url path  
    templateUrl: 'virtual-scroll.html'
})
export class AppComponent {
public records: string[] = [];
    constructor() {
        this.records = ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5", "Item 6", "Item 7", "Item 8", "Item 9", "Item 10"];
    }
    // maps the appropriate column to fields property
    public fields: object = { text: 'text', value: 'id' };
    public value =  ["Item 8", "Item 9", "Item 10"];
    // set the placeholder to AutoComplete input
    public waterMark: string = 'e.g. Item 1';   
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
<div id="wrapper" style='margin-top: 20px'>
	  <div id='content' style="margin: 0px auto; width:300px;">
        <!-- specifies the virtualization for the MultiSelect component-->
        <ejs-multiselect id='multiselect-virtulization' [dataSource]='records' [value]='value'  popupHeight='200px' [allowFiltering]='false' [placeholder]='waterMark'>
        </ejs-multiselect>
      </div>
    </div>

Binding Object Data Types

The MultiSelect component supports object binding for datasets containing complex objects. When allowObjectBinding is set to true, the component’s value property contains objects of the same type as the selected items from the data source. This feature enables binding arrays of objects from local sources, remote endpoints, or custom data providers tailored to specific application needs.

The following sample demonstrates preselected values for object data types:

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { FormsModule } from '@angular/forms'
import { MultiSelectModule } from '@syncfusion/ej2-angular-dropdowns'



import { Component } from '@angular/core';
import { MultiSelectComponent } from '@syncfusion/ej2-angular-dropdowns';


@Component({
imports: [
        FormsModule,MultiSelectModule
    ],


standalone: true,
    selector: 'app-root',
    // specifies the virtual-scroll url path  
    templateUrl: 'virtual-scroll.html'
})
export class AppComponent {
public records: { [key: string]: Object }[] = [];
    constructor() {
        for (let i: number = 1; i <= 150; i++) {
            const item: { [key: string]: Object } = {
                id: 'id' + i,
                text: `Item ${i}`,
            };
            this.records.push(item);
        }
    }
    // maps the appropriate column to fields property
    public fields: object = { text: 'text', value: 'id' };
    public value =  [{id: 'id11', text: 'Item 11'}, {id: 'id22', text: 'Item 22'}, {id: 'id33', text: 'Item 33'}];
    // set the placeholder to AutoComplete input
    public waterMark: string = 'e.g. Item 1';   
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
<div id="wrapper" style='margin-top: 20px'>
	  <div id='content' style="margin: 0px auto; width:300px;">
        <!-- specifies the virtualization for the MultiSelect component-->
        <ejs-multiselect id='multiselect-virtulization' [dataSource]='records' [value]='value' [fields]='fields' popupHeight='200px' [allowObjectBinding]='true' [allowFiltering]='false' [placeholder]='waterMark'>
        </ejs-multiselect>
      </div>
    </div>