How to bind default selected value in dropdown

[Jayesh Tajane]

Here is my html

<div style="width: 300px" class="mt-5 mb-5">

<ejs-dropdownlist

id="ddlelement"

#samples

[dataSource]="data"

[fields]="fields"

[placeholder]="text"

[(value)]="selectedItem"

></ejs-dropdownlist>

</div>

Here is component

// defined the array of data

public 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 property

public fields: Object = { text: 'Id', value: 'Name' };

//set the placeholder to DropDownList input

public text: string = "Select a country";

// Default selected item in dropdown

selectedItem = { Name: 'Bermuda' ,Id: 'BM'};

How i can bind   selectedItem    to dropdown

[Jeyanth Muthu Pratheeban Sankara Subramanian]

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     : 

<div style="width: 300px" class="mt-5 mb-5"> 

  <ejs-dropdownlist 

    id="ddlelement" 

    #samples 

    [dataSource]="data" 

    [fields]="fields" 

    [placeholder]="text" 

    [(value)]="selectedItem" 

  ></ejs-dropdownlist> 

</div> 

public selectedItem:string = "Bermuda"; 

Regards, 

Jeyanth. 

[Jayesh Tajane]

Thanks Jeyanth

[Jeyanth Muthu Pratheeban Sankara Subramanian]

Hi Jayesh, 

Most Welcome. 

Please let us know if you need any further assistance regarding this. 

Regards, 

Jeyanth.