How to set predefined selected value of the Angular Dropdown List component.
This article explains how to set a predefined selected value of the Angular DropDownList component.
DropDownList
The Angular DropDownList component is a quick replacement of the HTML select tags. It has a rich appearance, and it allows users to select a single value that is non-editable from a list of predefined values. Refer to this documentation to render the DropDownList component.
To render the DropDownList 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-dropdownlist id='games' [dataSource]='sportsData' [value]='value' [fields]='fields' [placeholder]='waterMark' ></ejs-dropdownlist>
[app.component.ts]
import { Component } from '@angular/core';
import { DropDownListComponent } from '@syncfusion/ej2-angular-dropdowns';
@Component({
selector: 'control-content',
templateUrl: 'default.html'
})
export class DefaultDropDownListComponent {
// 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 DropDownList input element
public waterMark: string = 'Select a game';
// set the value to select an item based on mapped value at initial rendering
public value: string = 'Game3';
}
In the sample above, the text fields ("Game") are assigned to the value property as a string to see the selected option(“Basketball”) in the DropDownList popup 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-ugpb2m?file=app.component.ts
Conclusion
I hope you enjoyed learning about how to set predefined selected value of Angular Dropdown List component.
You can refer to our Angular Dropdown List feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Angular DropDownList example to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
