DataList in Angular

Related searches

I have a <datalist> and <select> as follows:


Example 1:

<input type="text"  list="codes" [(ngModel)]="codeValue" (change)="saveCode(codeValue)">
<datalist id="codes">
  <option *ngFor="let c of codeList" [value]="c.code" >{{}}</option>

<select type="text"  list="codes" [(ngModel)]="codeValue1" (change)="saveCode(codeValue)">
  <option *ngFor="let c of codeList" [value]="c.code" >{{}}</option>

codeList Array in component.ts

    codeList = [
    { code: 'abcdhe568dhjkldn', name: 'item1' },
    { code: 'ksdkcs7238t8cds', name: 'item2' },
    { code: 'kascggibebbi', name: 'item3' }

DataList is showing both name ( and value (c.code) in the options and storing whatever is present in value whereas select is showing name ( and storing value(c.code).

Behavior of datalist

Behavior of select

Example 2:

<datalist id="codes">
<option *ngFor = "let i of [1,2,3,4]" [value]="i">{{i-1}}</option>


I want to show the value of i-1 in the suggestion box but bind the variable 'a' with i.

Existing Solution in HTML

From this post Show datalist labels but submit the actual value I see that we can use "data-value" to acheive the functionality in HTML. How can I achieve the same functionality in Angular.

Please help!

Thanks in advance.

Try Like this....

html File

<input type="text"  list="codes" [(ngModel)]="codeValue" (change)="saveCode($event)">
<datalist id="codes">
<option *ngFor="let c of codeList" [value]="" >{{}}</option>

ts File

 codeList = [
{ code: 'abcdhe568dhjkldn', name: 'item1' },
{ code: 'ksdkcs7238t8cds', name: 'item2' },
{ code: 'kascggibebbi', name: 'item3' }

 public saveCode(e): void {
let name =;
let list = this.codeList.filter(x => === name)[0];

angular-datalist-option, Toggle light/dark theme. Toggle Zen Mode. Project. Download Project. Info. Starter project for Angular apps that exports to the Angular CLI. 4.7k. 101. Files. src. Angular command not found; How to properly measure svg group dimensions in Angular? why is Google programmable search engine not displaying on Angular; Angular Document is not defined; material table event end rendering; Recent Comments. pooja on Angular ng serve produces Error: NGCC failed; Elliott on dont work on windows iis with

Try it this way.

<option *ngFor = "let i of [1,2,3,4]" (change)="a=i" [value]="i">{{i-1}}</option>

Make It Easy: Angular autocomplete using HTML 5, Angular role is very less here, autocomplete feature is taken care by html 5 datalist. Angular is used here only to set and get the selected values. Check below component code as well. selectCountryName is the method where we are getting the selected country list. Angular role is very less here, autocomplete feature is taken care by html 5 datalist. Angular is used here only to set and get the selected values. Angular is used here only to set and get the selected values.

Well, may someone correct me if I'm not telling the truth but you can't bind [value] to 'a', because then every option-element has the same value 'a'.

To achieve what you want you have to build an Array of objects that contain both fields, 'a' and 'i'. Then you can show 'i' and bind your value via ngModel to 'a'.


in your component

export class AI {
      a: number,
      i: number
    ) {}

aiList: Array<AI> = [];

ai: AI = new AI(1,0);
ai = new AI(2,1);
ai = new AI(3,2);
ai: = new AI(4,3);

in your template

<option *ngFor = "let ai of aiList" (change)="a=ai.a" [(ngModel)]="ai.a">{{ai.i}}</option>

DataList in Angular, Angular 6 - ngModel establish two way data binding via function. how to create different instances using [(ngModel)] in angular 4. Angular 4 - Generate select value from comma separated string. Set initially selected item in Select list in Angular2. Setting default value in select drop-down using Angularjs. The list attribute binds the datalist to an input using an id reference. This combination is available in Chrome, Opera and Firefox with buggy support in IE10+ Let’s see how it all goes together. First up, since this is Angular, let’s look at the markup. To get started you need to define an Angular controller. This one is named MainCtrl. Since this is just a simplified demo to illustrate the autocomplete widget, it doesn’t do much, but the code it’s pulled from is a form used to add

Display a selection list, The *ngFor is Angular's repeater directive. It repeats the host element for each element in a list. The syntax in this example is as follows: <li> is the host element. HTML5 Datalist is a new html tag shipped with HTML5 specification. HTML5 Datalist can be used to create a simple poor man’s Autocomplete feature for a webpage.. In this tutorial we will go through the basics of HTML5 Datalist tag and check some quick examples of autocomplete.

The <datalist> tag specifies a list of pre-defined options for an <input> element. The <datalist> tag is used to provide an "autocomplete" feature for <input> elements. Users will see a drop-down list of pre-defined options as they input data.

Angular is a platform for building mobile and desktop web applications. Join the community of millions of developers who build compelling user interfaces with Angular.

  • EDIT: Never mind, I didn't get the question at first
  • Hi @Dino, I have updated the question with another example for clear description of the problem.
  • Hi @DiabolicWords, I have attached a screenshot of the problem.The problem is that while displaying I get both the value and the name. In my case I just want to display the name (i-1) not the actual value(i).The value should be bound to the variable 'a' whereas the name should be displayed in the suggestion box.