Angular2: string value rendered as an integer when binding to a template

Question

Consider the following piece of Angular2 code:

<li *ngFor='let department of departments' value='{{department.id}}'>{{department.name}} {{department.id}}</li>

When I run it in the browser, it renders the following html (cleaned up for clarity):

<li value="-1677026285">Dept1 2617941011</li>

Notice that the same variable, department.id is rendered as its actual value of 2617941011 in the text portion of the li, but as something entirely different in the value attribute (looks like it attempted to parse that string as an integer).

Is there any way to avoid it?

I will add that the Department class (of which departments is an array of) specifies id as a strongly typed property:

    export class Department {constructor(public name:string = "", public id:string = ""){ }}

Thanks in advance!

Can you provide plukr for the same?

micronyks
– micronyks

2016-08-05 18:57:36 +00:00
Commented Aug 5, 2016 at 18:57 — micronyks
– micronyks, Commented Aug 5, 2016 at 18:57

yurzui · Accepted Answer · 2016-08-05 19:25:57Z

2

<li value='{{department.id}}'></li>

This code means that you pass value property on li element.

From this w3schools.com

The value property sets or returns the value of the value attribute of a list item.

Then look at this specification: https://www.w3.org/TR/html5/single-page.html#the-li-element

The value attribute, if present, must be a valid integer giving the ordinal value of the list item.

It should be number from -2147483648 to 2147483647

If the value attribute is present, user agents must parse it as an integer

So there is nothing related with angular2

Use attribute binding instead:

[attr.value]="department.id"

edited Aug 5, 2016 at 19:25

answered Aug 5, 2016 at 19:07

yurzui

215k32 gold badges450 silver badges413 bronze badges

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

3 Comments

July.Tech Over a year ago

That makes sense, but any idea how to work around it?

yurzui Over a year ago

Try [attr.value]='department.id'

July.Tech Over a year ago

Yes, that works. Thank you! I then had to access it from the component as $event.target.attributes['value'].value as opposed to just $event.target.value which is what I was doing pre-workaround.

Collectives™ on Stack Overflow

Angular2: string value rendered as an integer when binding to a template

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related