How to set predefined selected value of Angular MultiSelect Dropdown component
The Angular MultiSelect Dropdown is a quick replacement for the HTML select tag for selecting multiple values. Angular MultiSelect Dropdown is a textbox control that allows the user to type or select multiple values from a list of predefined options. Refer to this documentation to render the MultiSelect Dropdown component.
To render the MultiSelect Dropdown with selected option, you can assign the required field’s text value to the value property as mentioned in the following code example.
[app.component.html]
<ejs-multiselect id='sample-list1' [dataSource]='sportsData' [fields]='fields' [placeholder]='waterMark' [value]="value"></ejs-multiselect>
[app.component.ts]
import { Component, ViewEncapsulation } from '@angular/core';
import { MultiSelectComponent } from '@syncfusion/ej2-angular-dropdowns';
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.css'],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
// define the JSON of data
public sportsData: Object[] = [
{ Id: 'Game1', Game: 'American Football' },
{ Id: 'Game2', Game: 'Badminton' },
{ Id: 'Game3', Game: 'Basketball' },
{ Id: 'Game4', Game: 'Cricket' },
{ Id: 'Game5', Game: 'Football' },
{ Id: 'Game6', Game: 'Golf' },
{ Id: 'Game7', Game: 'Hockey' },
{ Id: 'Game8', Game: 'Rugby' },
{ Id: 'Game9', Game: 'Snooker' },
{ Id: 'Game10', Game: 'Tennis' }
];
// maps the appropriate column to fields property
public fields: Object = { text: 'Game', value: 'Id' };
// set the placeholder to MultiSelect input element
public waterMark: string = 'Favorite Sports';
// set the value to the Multi select dropdown component.
public value: string[] = ["Game1", "Game2"];
}
In the sample above, the text fields ("Game1 and Game2") are assigned to the value property as a string array to see the selected option (“American Football and basketball”) in the MultiSelect Dropdown for the corresponding value of the assigned text.
Run the above code, it will generate the following output in your browser.
Screenshot
The sample with above mentioned code has been attached.
Sample Link: https://stackblitz.com/edit/angular-9tht5f-12i6zw?file=app.component.html
To learn more about the Angular MultiSelect Dropdown component, refer to this Documentation, Samples and API link.
