How to bind default selected value in dropdown

Question

Here is my html

Here is component// defined the array of datapublic data: { [key: string]: Object }[] = [ { Name: 'Australia' , Id: 'AU'}, { Name: 'Bermuda' ,Id: 'BM'}, { Name: 'Canada', Id: 'CA', selected: true}, { Name: 'Cameroon', Id: 'CM' }, { Name: 'Denmark', Id: 'DK'}, { Name: 'France', Id:'FR' }];// maps the appropriate column to fields propertypublic fields: Object = { text: 'Id', value: 'Name' };//set the placeholder to DropDownList inputpublic text: string = "Select a country";// Default selected item in dropdownselectedItem = { Name: 'Bermuda' ,Id: 'BM'};How i can bind selectedItem to dropdown

Jeyanth Muthu Pratheeban Sankara Subramanian · Accepted Answer

Hi Jayesh,

Greetings from Syncfusion support.

We have checked your query of setting predefined value to the Dropdownlist. On examining the code snippet provided, you have bound Object type to the value property. We would like to know you that Dropdownlist does not support Object type for value rather it allows only primitive types like String, Number and Boolean types based on the value field. According to the provided code snippet, we suggest you to bind String type to value property. Please find the modified sample in the below link.

Sample Link : https://stackblitz.com/edit/angular-dropdownlist-value

Code Snippet :

<ejs-dropdownlist

id="ddlelement"

#samples

[dataSource]="data"

[fields]="fields"

[placeholder]="text"

[(value)]="selectedItem"

></ejs-dropdownlist>

</div>

public selectedItem:string = "Bermuda";

Regards,

Jeyanth.

public selectedItem:string = "Bermuda"; Regards, Jeyanth.

Jayesh Tajane · Answer

Thanks Jeyanth

Jeyanth Muthu Pratheeban Sankara Subramanian · Answer

Hi Jayesh, 

Most Welcome. 

Please let us know if you need any further assistance regarding this. 

Regards, 
Jeyanth.