Dynamically add attribute to input element

Question

I'm creating a bunch of input elements via an *ngFor statement, and on some of them I want to add an data-bv-integer="true" attribute, and on some I don't. Whether it appears or not is based on a property of the *ngFor item.

Is that possible to do?

I tried to add [attr.data-bv-integer]="false" as a test to see if that would remove the item but it doesn't.

Alex · Answer 1 · 2019-04-26T07:36:49.427

4

This is how you can dynamically add attributes to an HTML element with angular:

[<<attribute>>]="<<condition>> ? '<<if true>>' : '<<if false>>'"

In your case it would be:

[attr.data-bv-integer]="shouldShow() ? 'true' : null"

Note: null will remove the attribute

EDIT: Added "attr." thanks @ConnorsFan

edited Apr 26 '19 at 07:36

answered Jul 17 '18 at 19:26

Alex

634
10
29

Except data-bv-integer isn't defined on `input` and so that's a runtime error. – Gargoyle Jul 17 '18 at 19:28
@Gargoyle - He forgot the `attr.` prefix. – ConnorsFan Jul 17 '18 at 19:29
Ah, so it's not `false` to remove it, it's `null`. I was so close :) – Gargoyle Jul 17 '18 at 19:30
@Gargoyle have you tried using `type="number"`? – Alex Jul 17 '18 at 19:30
An alternative syntax would be: `[attr.data-bv-integer]="condition || null"`. – ConnorsFan Jul 17 '18 at 19:31
@A.S.I am using number, but some are decimal and some are integer, and Safari doesn't play well with the number type either. – Gargoyle Jul 17 '18 at 19:31

Dynamically add attribute to input element

1 Answers1