Syncfusion Angular Dropdowns

Implementing Syncfusion Angular Dropdowns

Security & Trust Boundary

Default posture: local data only

All dropdown components in this skill default to local, in-memory data sources. Binding a component to a remote HTTP endpoint (via DataManager or any Observable/HTTP source) is a non-default, elevated-risk operation that requires an explicit security review before it is permitted in production code.

⛔ Do not generate or suggest remote DataManager / HTTP data-source configurations unless the consuming application has passed a security review confirming that:

1. The target endpoint is owned and operated by the same team as the application.
2. The endpoint enforces authentication, authorization, and input validation.
3. All responses are sanitized before being bound to a component dataSource.
4. A Content Security Policy (CSP) covering the origin is in place.

Mandatory security requirements

AutoComplete

A text input component that provides matching suggestions as the user types. Supports free-form input, remote data, filtering strategies, grouping, virtual scrolling, and full Angular forms integration.

Component Overview & Architecture

The AutoComplete is a text input component that provides matching suggestions as the user types. It is designed for:

1. Type-ahead suggestions — shows matching items from a data source as the user types
2. Free-form input — users can type any value, not restricted to the list
3. Search/filter — multiple filter strategies (StartsWith, Contains, EndsWith)
4. Autofill — automatically completes the first matched suggestion in the input
5. Grouped suggestions — categorize items by a groupBy field
6. Virtual scrolling — efficiently handles thousands of items
7. Template customization — item, group, header, footer, and empty-state templates

Key Characteristics

Documentation Navigation Guide

📄 Getting Started

Read: references/autocomplete-getting-started.md

• Install @syncfusion/ej2-angular-dropdowns package
• Set up Angular 21+ project with standalone components
• Import AutoCompleteModule and required CSS themes
• Create your first AutoComplete with basic data binding
• Configure popup height, width, and placeholder
• Enable two-way binding with [(value)]

📄 Data Binding

Read: references/autocomplete-data-binding.md

• Bind to local arrays (strings, numbers, objects, complex objects)
• Map value, text, and iconCss fields via fields property
• Remote data using DataManager with OData, Web API adapters
• Async pipe pattern for RxJS Observables
• Object binding with allowObjectBinding
• Preselecting values using the value property

📄 Filtering & Search

Read: references/autocomplete-filtering-and-search.md

• Configure filterType (StartsWith, Contains, EndsWith)
• Limit suggestion count with suggestionCount
• Minimum character threshold with minLength
• Case-sensitive filtering with ignoreCase
• Diacritics/accent-insensitive filtering with ignoreAccent
• Debounce delay to optimize remote filtering with debounceDelay
• Custom filtering via the filtering event with updateData

📄 Grouping & Templates

Read: references/autocomplete-grouping-and-templates.md

• Group suggestions by category using fields.groupBy
• Item templates for custom rendering
• Group header templates (inline and fixed)
• Header and footer templates for the popup
• Empty state with noRecordsTemplate
• Action failure template for remote data errors

📄 Feature Configuration

Read: references/autocomplete-feature-configuration.md

• Autofill: inline suggestion completion with autofill property
• Highlight matched characters with highlight property
• Disable individual items with fields.disabled or disableItem method
• Disable entire component with enabled property
• Resizable popup with allowResize
• Virtual scrolling for large datasets with enableVirtualization
• Show/hide popup button with showPopupButton
• Show/hide clear button with showClearButton
• RTL support with enableRtl
• Sort order with sortOrder

📄 Form Support & Validation

Read: references/autocomplete-form-support-and-validation.md

• Template-driven forms using ngModel and FormsModule
• Reactive forms using FormControl, FormGroup, and ReactiveFormsModule
• Binding and validation patterns
• Pre-selecting values via form model

📄 Accessibility & Localization

Read: references/autocomplete-accessibility-and-localization.md

• WCAG 2.2, Section 508, and ADA compliance
• Full keyboard shortcuts (Arrow keys, Tab, Enter, Escape, Alt+Down/Up)
• ARIA attributes: aria-haspopup, aria-expanded, aria-selected, aria-autocomplete
• Screen reader support and focus management
• Localization with L10n.load() for noRecordsTemplate and actionFailureTemplate
• RTL language support

📄 Advanced Patterns & How-To

Read: references/autocomplete-advanced-patterns-how-to.md

• Autofill feature with the autofill property
• Highlight searched characters with the highlight property
• Multi-field custom filtering with Predicate (filter by both Name and Code)
• Icon support via fields.iconCss
• Suggestion list on focus from browser local storage

  ⚠️ Security note: Local storage is accessible to any JavaScript running on the same origin and is a common XSS attack surface. Never store sensitive data (tokens, PII) in local storage. Sanitize any values read from local storage before binding them to the component's dataSource or value.

• Custom search and highlight styling

📄 API Reference

Read: references/autocomplete-api.md

• Complete properties reference with types, defaults, and descriptions
• All methods with signatures and usage
• All events with payload types and handler examples

Quick Start Example

// app.component.ts (Angular 21 Standalone)
import { Component } from '@angular/core';
import { AutoCompleteModule } from '@syncfusion/ej2-angular-dropdowns';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [AutoCompleteModule],
  template: `
    <ejs-autocomplete
      id="sports"
      [dataSource]="sportsData"
      placeholder="Find a sport"
      [(value)]="selectedValue">
    </ejs-autocomplete>
  `
})
export class AppComponent {
  public sportsData: string[] = [
    'Badminton', 'Basketball', 'Cricket',
    'Football', 'Golf', 'Hockey', 'Tennis'
  ];
  public selectedValue: string = '';
}

Install the package:

⚠️ Security note: Pin the package to a specific version to prevent unintended upgrades to potentially compromised releases. Verify the installed version against your lockfile (package-lock.json / yarn.lock) after installation.

ng add @syncfusion/ej2-angular-dropdowns@<version>

Add CSS (styles.css):

⚠️ Security note: These imports are resolved from node_modules at build time. Ensure the installed Syncfusion packages match your pinned versions in package-lock.json or yarn.lock before building. Do not source these files from a CDN without Subresource Integrity (SRI) hashes.

@import '../node_modules/@syncfusion/ej2-base/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-lists/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material3.css';

Common Patterns

Pattern 1: Filter with Complex Object Data

// Map fields for object array
public fields: Object = { value: 'Game' };
public sportsData: { [key: string]: Object }[] = [
  { Id: 'Game1', Game: 'Badminton' },
  { Id: 'Game2', Game: 'Cricket' }
];

<ejs-autocomplete [dataSource]="sportsData" [fields]="fields" placeholder="Find a game">
</ejs-autocomplete>

When to use: Whenever your data is an array of objects and you need to display one field as the suggestion text.

Pattern 2: Autofill + Highlight

<ejs-autocomplete
  [dataSource]="data"
  [autofill]="true"
  [highlight]="true"
  filterType="StartsWith">
</ejs-autocomplete>

When to use: Search bars where users expect inline completion and visual emphasis on matched text.

Pattern 3: Remote Data with Debounce

🔒 Security policy — remote data is a restricted pattern. Binding AutoComplete to a remote endpoint requires a security review (see Security & Trust Boundary above) before use in production. Remote data binding details and requirements are documented in references/autocomplete-data-binding.md. No remote DataManager example is provided here by default.

When to use: API-backed autocomplete where you want to reduce request frequency — only after the endpoint and data pipeline have been reviewed per the security requirements above.

Pattern 4: Virtual Scrolling for Large Datasets

import { AutoCompleteComponent, VirtualScroll } from '@syncfusion/ej2-angular-dropdowns';
AutoCompleteComponent.Inject(VirtualScroll);

<ejs-autocomplete
  [dataSource]="records"
  [fields]="fields"
  [enableVirtualization]="true"
  popupHeight="200px">
</ejs-autocomplete>

When to use: Datasets with 1,000+ items where rendering all DOM elements at once is costly.

Key Properties Quick Reference

Workflow Decision Tree

Need to implement AutoComplete?
│
├─ What's your data source?
│   ├─ Local array → See Data Binding: "Array of string" or "Array of object"
│   └─ Remote API  → See Data Binding: "Bind to remote data"
│
├─ How should filtering work?
│   ├─ Default (Contains)   → No extra config needed
│   ├─ StartsWith           → filterType="StartsWith"
│   ├─ Custom multi-field   → See Advanced Patterns: "Custom filtering"
│   └─ Accent-insensitive   → [ignoreAccent]="true"
│
├─ Need autofill (inline completion)?
│   └─ YES → [autofill]="true" + filterType="StartsWith"
│
├─ Highlight matched text?
│   └─ YES → [highlight]="true"
│
├─ Large dataset (1,000+ items)?
│   └─ YES → [enableVirtualization]="true" + inject VirtualScroll
│
├─ Using inside a form?
│   ├─ Template-driven → See Form Support: "ngModel"
│   └─ Reactive        → See Form Support: "FormControl"
│
└─ Need accessibility or localization?
    └─ YES → See Accessibility & Localization reference

ComboBox

A flexible dropdown component that allows users to select from a predefined list or enter a custom value. Supports filtering, grouping, templates, virtual scrolling, and full Angular forms integration.

Component Overview & Architecture

The ComboBox is a flexible dropdown component that allows users to:

1. Select from a list of predefined options
2. Enter custom values when allowCustom is enabled
3. Search/filter items as they type
4. Group items by category
5. Customize display with templates for items, groups, headers, footers

Key Characteristics

Documentation Navigation Guide

📄 Getting Started

Read: references/combobox-getting-started.md

• Install @syncfusion/ej2-angular-dropdowns package
• Set up Angular 21+ project with standalone components
• Import required modules and CSS themes
• Create your first ComboBox with minimal code
• Basic event handlers and configuration

📄 Data Binding & Sources

Read: references/combobox-data-binding.md

• Bind to local arrays (strings, numbers, objects)
• Map text and value fields for complex data
• Remote data from Web APIs, OData services
• DataManager configuration for different data adapters
• Async pipe for RxJS Observables
• Handling dynamic data updates

📄 Filtering & Search

Read: references/combobox-filtering-and-search.md

• Enable filtering with allowFiltering property
• Configure filter types (StartsWith, Contains, EndsWith, etc.)
• Case-sensitive filtering for strict matching
• Diacritics filtering for accent-insensitive search
• Debounce delay to optimize remote requests
• Minimum filter character requirements
• Custom filtering with remote queries

📄 Grouping & Templates

Read: references/combobox-grouping-and-templates.md

• Group items by category using groupBy field
• Item templates for custom item rendering
• Group header templates (inline and fixed)
• Footer templates for additional information
• Combining multiple templates effectively
• Template performance optimization

📄 Advanced Feature Configuration

Read: references/combobox-feature-configuration.md

• Disable specific items or the entire component
• Read-only mode for display-only scenarios
• Virtual scrolling for thousands of items
• Dynamic resize behavior
• Allow custom values not in the list
• Styling and theme integration
• RTL support for Arabic/Hebrew

📄 Form Support & Validation

Read: references/combobox-form-support-and-validation.md

• Two-way binding with template-driven forms (ngModel)
• Reactive forms with FormControl and FormGroup
• Built-in and custom validators
• Form submission and validation state
• Disabled ComboBox in form context
• Error message display patterns

📄 Accessibility & Localization

Read: references/combobox-accessibility-and-localization.md

• WCAG 2.2, Section 508, and ADA compliance
• Keyboard navigation shortcuts (arrow keys, Tab, Enter, Escape)
• Screen reader support with ARIA attributes
• Focus management and visual indicators
• Localization strings for different languages
• Right-to-left (RTL) language support

📄 Advanced Patterns & How-To Guides

Read: references/combobox-advanced-patterns-and-how-to.md

• Autofill suggestions for autocomplete behavior
• Cascading ComboBoxes with dependent dropdowns
• Icons and emoji support in list items
• Resizable popup for better visibility
• Real-world patterns (search, live data, grouping)
• Performance optimization techniques

📄 API Reference

Read: references/combobox-api.md

• Complete properties reference with types, defaults, and examples
• All methods with signatures, parameters, and usage examples
• All events with payload types and handler examples
• Notes on template syntax, two-way binding, and virtual scrolling
• Links to official Syncfusion documentation

Quick Start Example

Minimal Setup (5 minutes)

// app.component.ts
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ComboBoxComponent, ComboBoxModule } from '@syncfusion/ej2-angular-dropdowns';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, ComboBoxModule],
  template: `
    <ejs-combobox
      [dataSource]="data"
      fields="{ text: 'text', value: 'id' }"
      placeholder="Select a language"
      [(ngModel)]="selectedValue">
    </ejs-combobox>
  `
})
export class AppComponent {
  selectedValue = '';
  data = [
    { id: '1', text: 'JavaScript' },
    { id: '2', text: 'TypeScript' },
    { id: '3', text: 'Angular' },
    { id: '4', text: 'React' }
  ];
}

What's happening:

1. Import ComboBoxComponent from @syncfusion/ej2-angular-dropdowns
2. Define data array with objects (id, text)
3. Use fields to map text and value fields
4. Bind selected value with [(ngModel)]
5. Set placeholder for empty state

Common Patterns & Workflows

Pattern 1: Autocomplete with Autofill

[autofill]="true"              // Auto-complete suggestions
[allowFiltering]="true"        // Enable typing
filterType="StartsWith"        // Match from beginning

When to use: Skills, tags, email domains (user types 'j', sees 'JavaScript')

See: Advanced Patterns

Pattern 2: Cascading Dependent Dropdowns

// Country → State → City relationship
onCountryChange() {
  this.states = this.getStatesFor(country);
}

onStateChange() {
  this.cities = this.getCitiesFor(state);
}

When to use: Address selection, hierarchical data (country/state/city)

See: Advanced Patterns

Pattern 3: Grouped Items with Icons

fields = { 
  text: 'Name', 
  value: 'Id', 
  groupBy: 'Category',
  iconCss: 'Icon'
};

When to use: Visual organization (languages with icons, file types)

See: Advanced Patterns

Pattern 4: Resizable Dropdown for Long Content

[allowResize]="true"           // Enable resize handle
itemTemplate="customTemplate"  // Show rich content

When to use: Product listings, descriptions, detailed information

See: Advanced Patterns

Key Props & Configuration

Essential Properties

Advanced Properties

Component Lifecycle

1. CREATE: Component initialized
   ↓
2. DATA BIND: dataSource loaded & displayed
   ↓
3. USER INTERACTION: typing, clicking, keyboard
   ↓
4. FILTER/SEARCH: items filtered based on input
   ↓
5. SELECT: user chooses item or enters custom value
   ↓
6. VALUE UPDATE: ngModel updates, events fire
   ↓
7. DESTROY: component cleaned up

Key events to handle:

• change: When selected value changes
• filtering: When user types (filter queries)
• select: When item is selected
• focus: When component gets focus
• blur: When component loses focus

Workflow Decision Tree

Need to implement ComboBox? Follow this decision tree:

1. Do you have data to display?
   ├─ YES: Go to "Data Binding & Sources" reference
   └─ NO: Define your data array first

2. Do users need to search/filter?
   ├─ YES: Go to "Filtering & Search" reference
   └─ NO: allowFiltering = false (default)

3. Do you need to group items?
   ├─ YES: Go to "Grouping & Templates" reference
   └─ NO: Skip grouping configuration

4. Are you using a form?
   ├─ YES: Go to "Form Support & Validation" reference
   └─ NO: Use standalone ComboBox

5. Is accessibility required?
   ├─ YES: Go to "Accessibility & Localization" reference
   └─ NO: Still recommended for compliance

6. Performance issues with large datasets?
   ├─ YES: Enable virtual scrolling + pagination
   └─ NO: Standard rendering is fine

Next Steps

1. Start here: Getting Started - Set up your first ComboBox
2. Bind data: Data Binding & Sources - Connect to your data
3. Add search: Filtering & Search - Enable user filtering
4. Customize: Grouping & Templates - Style and organize display
5. Advanced: Advanced Patterns & How-To - Autofill, cascading, icons, resizing
6. Features: Feature Configuration - Enable advanced features
7. Integrate: Form Support - Connect to forms
8. Polish: Accessibility - Ensure compliance
9. Reference: API Reference - Full properties, methods, and events reference

Additional Resources

• Syncfusion Angular ComboBox API Reference
• Angular Version Support
• DataManager Documentation
• Component Themes & Styling

DropDownList

A single-value selection component from a predefined list. Supports local and remote data sources, filtering, grouping, custom templates, virtualization for large datasets, and full Angular forms integration.

Documentation Navigation Guide

Getting Started

📄 Read: references/dropdownlist-getting-started.md

• Installation and Angular CLI setup
• Installing @syncfusion/ej2-angular-dropdowns
• CSS/theme imports for Material3
• Adding <ejs-dropdownlist> to the template
• Basic data binding with [dataSource]
• Popup height/width configuration
• Two-way binding with [(value)]

Data Binding

📄 Read: references/dropdownlist-data-binding.md

• Binding primitive arrays (strings, numbers)
• Binding arrays of objects with [fields] mapping
• Binding to nested/complex objects
• Remote data via DataManager (OData, Web API)
• Async pipe with Observable data streams
• Value binding (primitive and object types with allowObjectBinding)

Filtering

📄 Read: references/dropdownlist-filtering.md

• Enabling search with [allowFiltering]
• Using the filtering event and updateData() method
• Minimum character threshold before filtering starts
• Filter types: contains, startsWith, endsWith
• Case-sensitive filtering
• Diacritics/accent-insensitive filtering
• Debounce delay for performance optimization

Templates

📄 Read: references/dropdownlist-templates.md

• Item template: customize each list item
• Value template: customize the selected value display
• Group template: customize group header appearance
• Header template: static element at popup top
• Footer template: static element at popup bottom
• No-records template: empty state display
• Action failure template: error state display

Grouping & Virtualization

📄 Read: references/dropdownlist-grouping-and-virtualization.md

• Grouping items with groupBy field
• Inline and fixed floating group headers
• Virtual scrolling with [enableVirtualization] for large lists
• Virtual scrolling with remote data
• Combining filtering and virtualization
• Customizing item count in virtual mode

Disabled Items & Forms

📄 Read: references/dropdownlist-disabled-items-and-forms.md

• Disabling specific items via fields.disabled
• Dynamic disableItem() method (by value, index, or element)
• Disabling the entire component with [enabled]="false"
• Template-driven forms with [(ngModel)]
• Reactive forms with FormControl and FormGroup

Customization & Styling

📄 Read: references/dropdownlist-customization-and-styling.md

• CSS overrides for wrapper, icon, focus states
• Outline theme focus customization
• Popup appearance and list item styles
• Float label and placeholder styling
• Mandatory asterisk pattern
• Localization with L10n class
• RTL (right-to-left) support

How-To Recipes

📄 Read: references/dropdownlist-how-to.md

• Add / remove / clear items dynamically
• Close popup programmatically
• Cascading DropDownLists
• Customize group header template
• Highlight filtered characters
• Incremental search behavior
• Modify remote data results
• Remote data item count display
• Tooltip on list items
• Value change event handling
• Icon support in list items

API Reference

📄 Read: references/dropdownlist-api.md

• Complete properties reference with types, defaults, and usage examples
• All methods with signatures, parameters, and return types
• All events with argument interfaces and usage examples
• Interface details: FieldSettingsModel, ChangeEventArgs, SelectEventArgs, PopupEventArgs, FilteringEventArgs
• Quick-reference summary tables for properties, methods, and events

Quick Start Example

import { Component, OnInit } from '@angular/core';
import { DropDownListModule } from '@syncfusion/ej2-angular-dropdowns';

@Component({
  standalone: true,
  imports: [DropDownListModule],
  selector: 'app-root',
  template: `
    <ejs-dropdownlist
      id="ddl"
      [dataSource]="sports"
      [fields]="fields"
      placeholder="Select a sport"
      [(value)]="selectedValue"
      (change)="onChange($event)">
    </ejs-dropdownlist>
    <p>Selected: {{ selectedValue }}</p>
  `
})
export class AppComponent implements OnInit {
  public sports: { id: number; name: string }[] = [];
  public fields = { text: 'name', value: 'id' };
  public selectedValue: number = 2;

  ngOnInit() {
    this.sports = [
      { id: 1, name: 'Badminton' },
      { id: 2, name: 'Cricket' },
      { id: 3, name: 'Football' },
      { id: 4, name: 'Tennis' }
    ];
  }

  onChange(args: any) {
    this.selectedValue = args.value;
  }
}

Common Patterns

Searchable Dropdown

// Enable filtering in template
// <ejs-dropdownlist [allowFiltering]="true" (filtering)="onFilter($event)">
import { FilteringEventArgs } from '@syncfusion/ej2-angular-dropdowns';
import { Query } from '@syncfusion/ej2-data';

onFilter(args: FilteringEventArgs) {
  let query = new Query();
  query = args.text !== '' 
    ? query.where('name', 'contains', args.text, true) 
    : query;
  args.updateData(this.sports, query);
}

Remote Data Dropdown

🔒 Security policy — remote data is a restricted pattern. Binding DropDownList to a remote endpoint requires a security review (see Security & Trust Boundary) before use in production. Remote data binding details and requirements are documented in references/dropdownlist-data-binding.md. No remote DataManager example is provided here by default.

Reactive Form Integration

import { FormBuilder, FormGroup, Validators, ReactiveFormsModule } from '@angular/forms';
import { DropDownListModule } from '@syncfusion/ej2-angular-dropdowns';

// In component:
form = this.fb.group({ sport: ['Cricket', Validators.required] });
// In template:
// <form [formGroup]="form">
//   <ejs-dropdownlist formControlName="sport" [dataSource]="sports"></ejs-dropdownlist>
// </form>

Key Props

Common Use Cases

Form field with validation → See references/dropdownlist-disabled-items-and-forms.md

Large list (1000+ items) → Enable [enableVirtualization]="true" — see references/dropdownlist-grouping-and-virtualization.md

Country/State/City cascading → See references/dropdownlist-how-to.md

Custom item rendering (icons, multi-column) → See references/dropdownlist-templates.md

Remote API data → See references/dropdownlist-data-binding.md

ListBox

A list-based selection component enabling single or multi-item selection. Supports data binding, templates, drag-and-drop reordering and transfer, sorting, grouping, and comprehensive accessibility features.

Component Overview

The Syncfusion ListBox is a high-performance dropdown list replacement with advanced features:

Documentation Navigation Guide

Getting Started

📄 Read: references/listbox-getting-started.md

• Installation and package setup
• Angular standalone vs NgModule patterns
• Basic component initialization
• CSS imports and theme selection
• Binding local data sources
• Running and testing the application

Selection Modes and Interactions

📄 Read: references/listbox-selection-modes.md

• Single item selection
• Multiple item selection with SHIFT/CTRL
• Checkbox selection mode
• Select all functionality
• Handling change events
• Getting selected items programmatically

Data Binding and Field Mapping

📄 Read: references/listbox-data-binding.md

• Binding array of strings
• Binding array of objects
• Binding complex nested objects
• Remote data with DataManager and Query
• Field mapping (text, value, groupBy, iconCss)
• Troubleshooting data binding issues

Drag-and-Drop Features

📄 Read: references/listbox-drag-and-drop-features.md

• Single ListBox drag-and-drop reordering
• Dual ListBox drag-and-drop transfer
• Drag and drop events (dragStart, drag, drop)
• Scope configuration for multiple lists
• Event handling and item manipulation
• Real-world dual ListBox patterns

Customization and Styling

📄 Read: references/listbox-customization.md

• Icons and iconCss field mapping
• Custom item templates
• Grouping items by category
• Sorting items (ascending/descending)
• CSS styling and theming
• Theme Studio integration
• Responsive design

Practical Implementation Examples

📄 Read: references/listbox-practical-examples.md

• Filtering ListBox items
• Form submission with selected items
• Enable/disable items conditionally
• Scroller for large datasets
• Real-world use cases
• Common troubleshooting scenarios

How-To Guides and Common Tasks

📄 Read: references/listbox-how-to-guides.md

• Add items programmatically
• Select items programmatically
• Enable or disable items dynamically
• Enable scroller for large datasets
• Filter ListBox data with input
• Submit selected items in forms

API Reference

📄 Read: references/listbox-api.md

• All component properties with types, defaults, and examples
• All public methods with parameter signatures and usage examples
• All events with event argument interfaces and handler patterns
• Interface definitions: FieldSettingsModel, SelectionSettingsModel, ToolbarSettingsModel
• Event arg interfaces: ListBoxChangeEventArgs, DragEventArgs, DropEventArgs, BeforeItemRenderEventArgs, FilteringEventArgs, SourceDestinationModel
• Enum definitions: SelectionMode, SortOrder, FilterType, ToolBarPosition, CheckBoxPosition

Quick Start Example

Basic ListBox with Local Data

import { Component, OnInit } from '@angular/core';
import { ListBoxModule } from '@syncfusion/ej2-angular-dropdowns';

@Component({
  imports: [ListBoxModule],
  standalone: true,
  selector: 'app-listbox',
  template: `
    <ejs-listbox 
      [dataSource]="items"
      [selectionSettings]="{ mode: 'Multiple' }">
    </ejs-listbox>
  `
})
export class ListBoxComponent implements OnInit {
  public items: { [key: string]: Object }[] = [];

  ngOnInit(): void {
    this.items = [
      { text: 'Option 1', id: '1' },
      { text: 'Option 2', id: '2' },
      { text: 'Option 3', id: '3' }
    ];
  }
}

With Styles

⚠️ Security note: These imports are resolved from node_modules at build time. Ensure the installed Syncfusion packages match your pinned versions in package-lock.json or yarn.lock before building. Do not source these files from a CDN without Subresource Integrity (SRI) hashes.

/* In your global styles.css */
@import '@syncfusion/ej2-base/styles/material3.css';
@import '@syncfusion/ej2-dropdowns/styles/material3.css';
@import '@syncfusion/ej2-inputs/styles/material3.css';
@import '@syncfusion/ej2-lists/styles/material3.css';

Common Patterns

Selection with Ch

…(truncated)