Resizing in Angular MultiSelect component

26 Aug 20254 minutes to read

The MultiSelect component supports dynamic popup resizing through the allowResize property. When enabled, users can resize the popup by dragging its borders, enhancing visibility and usability. The resized dimensions are automatically preserved in the browser’s local storage, maintaining consistent sizing across user sessions.

The resizing feature provides resize handles on the popup borders and supports the following events: resizeStart, resizeStop, and resizing for handling custom resize behaviors. The popup maintains minimum and maximum size constraints to ensure optimal user experience.

The following sample demonstrates the popup resize functionality.

app.component.ts

import { FormsModule, ReactiveFormsModule } from '@angular/forms'
import { MultiSelectModule } from '@syncfusion/ej2-angular-dropdowns'
import { ButtonModule } from '@syncfusion/ej2-angular-buttons'
import { Component } from '@angular/core';
@Component({
    imports: [
        FormsModule, ReactiveFormsModule, MultiSelectModule, ButtonModule
    ],
    standalone: true,
    selector: 'app-root',
    // specifies the template string for the MultiSelect component
    template: `<h2>Select countries</h2>
    <ejs-multiselect id='multiselectelement' #samples [allowResize]='allowResize' [dataSource]='data' [fields]='fields' [placeholder]='watermarks'></ejs-multiselect>`
})
export class AppComponent {
    // define the JSON of dropdown data
    public data: { [key: string]: Object; }[] = [
        { Name: 'Australia', Code: 'AU' },
        { Name: 'Bermuda', Code: 'BM' },
        { Name: 'Canada', Code: 'CA' },
        { Name: 'Cameroon', Code: 'CM' },
        { Name: 'Denmark', Code: 'DK' },
        { Name: 'France', Code: 'FR' },
        { Name: 'Finland', Code: 'FI' },
        { Name: 'Germany', Code: 'DE' },
        { Name: 'Greenland', Code: 'GL' },
        { Name: 'Hong Kong', Code: 'HK' },
        { Name: 'India', Code: 'IN' },
        { Name: 'Italy', Code: 'IT' },
        { Name: 'Japan', Code: 'JP' },
        { Name: 'Mexico', Code: 'MX' },
        { Name: 'Norway', Code: 'NO' },
        { Name: 'Poland', Code: 'PL' },
        { Name: 'Switzerland', Code: 'CH' },
        { Name: 'United Kingdom', Code: 'GB' },
        { Name: 'United States', Code: 'US' }
    ];

    // maps the appropriate column to fields property
    public fields: Object = { text: 'Name', value: 'Code' };
    // set true for enable the resize property to ComboBox 
    public allowResize: boolean = true;
    //placeholder for multiselect
    public watermarks: string = 'e.g. Australia';
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));