How to bind a selected item in a drop-down list to a text box and edit it?
You can bind a selected value from the drop-down list using the ngModel and edit it inside the text box or numeric input box. The selected item text and value can be got using the change event of the drop-down list through the args.itemData. To bind this itemData text to the text box and edit the selected text, refer to the following code.
App.component.html:
<div style="margin: 0px auto; width:250px; padding-top: 40px;"> <label>EJ2 DropDownList</label><br /><br /> <ejs-dropdownlist id='games' #sample [dataSource]='sportsData' (change)='onChange($event)' [(value)]='value' [(text)]='text' [fields]='fields' [placeholder]='waterMark' [popupHeight]='height'></ejs-dropdownlist> <div style="margin-top:15px"> <label>Game Id:</label><br /><br /> <input id="Gvalue" type="number" [(ngModel)]="value" /> </div> <div style="margin-top:15px"> <label>Game Name:</label><br /><br /> <input id="Gtext" type="text" [(ngModel)]="text" /> </div> </div>
App.component.ts:
import { Component,ViewChild } from '@angular/core';
import { DropDownListComponent } from '@syncfusion/ej2-ng-dropdowns';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
@ViewChild('sample')
public ddlObj: DropDownListComponent;
// define the JSON of data
public sportsData: Object[] = [
{ Id: 1, Game: 'American Football' },
{ Id: 2, Game: 'Badminton' },
{ Id: 3, Game: 'Basketball' },
{ Id: 4, Game: 'Cricket' },
{ Id: 5, Game: 'Football' },
{ Id: 6, Game: 'Golf' },
{ Id: 7, Game: 'Hockey' },
{ Id: 8, Game: 'Rugby' },
{ Id: 9, Game: 'Snooker' },
{ Id: 10, Game: 'Tennis' }
];
// maps the appropriate column to fields property
public fields: Object = { text: 'Game', value: 'Id' };
// set the height of the popup element
public height: string = '220px';
// 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: number = 3;
//set text for model textbox
public text:string='Basketball';
//change event of DropDownList
public onChange(args: any): void {
this.text=args.itemData.Game; //assign the changed text in DropDownList to textbox
}
}
App.module.ts:
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { FormsModule } from '@angular/forms'; import { DropDownListModule} from '@syncfusion/ej2-ng-dropdowns'; import { AppComponent } from './app.component'; import { HelloComponent } from './hello.component';
@NgModule({ imports: [ BrowserModule, FormsModule ,DropDownListModule], declarations: [ AppComponent, HelloComponent ], bootstrap: [ AppComponent ] }) export class AppModule { } |
StackBlitz sample link: https://stackblitz.com/edit/angular-svhivj
Output:
