Unable to bind to "list" attribute of input element

Question

I am unable to bind to the list attribute of an input element using [list]="..." syntax. I get the error

Can't bind to 'list' since it isn't a known property of 'input'

Obviously, if I just use list="..." in the template it works. But I need to be able to bind to a component variable.

UPDATE: I'll try to make it clearer why I need to bind like this: [list].

My code looks like this:

component.ts

public arr = [ { name: 'Input1', autocomp: [1, 5, 10, 22], }, { name: 'Input2', autocomp: [0.2, 0.3, 0.4], }, { name: 'Input3', autocomp: [4, 5, 6], }, ];

component.html

<input *ngFor="let item of arr" [id]="item.name" /> <datalist *ngFor="let item of arr" [id]="item.name + '-datalist'"> <option *ngFor="let num of item.autocomp" [value]="num">{{ num }}</option> </datalist>

Each input needs to reference the corresponding datalist. Ideally, I would just do:

<input *ngFor="let item of arr" [id]="item.name" [list]="item.name + '-datalist'" />

But this gives me the error.

Yoann Augen · Accepted Answer · 2020-05-20 10:27:16Z

1

If you need to bind an attribute on a native element, you should do it like that :

<input [attr.list]="myDynamicId" />

answered May 20, 2020 at 10:27

Yoann Augen

2,0563 gold badges23 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Cagri Tacyildiz · Accepted Answer · 2020-05-20 10:14:52Z

Demo You can try list="dataListId" rather than [list]="param"

[list] is binding method. But for autocomplete options. You need to give dataset id to input so you don't need to bind anything just give id of datalist

for html

<input list="browsers"> <datalist id="browsers"> <option *ngFor="let data of datas" value="{{data}}"> </datalist>

for component.ts

datas=[ "test1","test2","abc","xyz"]

Collectives™ on Stack Overflow

Unable to bind to "list" attribute of input element

2 Answers 2

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Related