Add Dynamic Attributes in Angular2

Question

I have existing javascript function which is used to create dynamic element using setAttribute function. Now I want to append attributes [(ngModel)] into this element for two way data binding. I tried to add this using

obj.setAttribute("[(ngModel)]", "modelName")

But I'm getting error-

Failed to execute 'setAttribute' on 'Element': '[(ngModel)]' is not a valid

Pankaj Parkar · Accepted Answer · 2016-10-04 04:52:12Z

1

Instead of setting attribute from JavaScript, put all the properties inside array and loop it to render all the input fields.

<div ngFor="item in items">

  <input [(ngModel)]="item.modelName" class="form-control" />

</div>

answered Oct 4, 2016 at 4:52

Pankaj Parkar

136k23 gold badges240 silver badges303 bronze badges

hi, thnx for response, actually I am using metawidget javascript api to generate element from JSON schema. So I went through api where they are using settAtributes to append attributes.
– deen
Commented Oct 4, 2016 at 5:00
2

Adding any Angular2 specific binding syntax to the DOM is pointless. Angular2 converts these bindings to JS before it adds components to the DOM. In the DOM bindngs won't have any effect at all.
– Günter Zöchbauer
Commented Oct 4, 2016 at 5:14
So is it a goodchoice to predefine a template and the use it, istead dynamically append or add an attribute to it? @Günter Zöchbauer
– peaceUser
Commented Oct 4, 2016 at 5:50
3

Definitely. Try to avoid modifying the DOM imperatively. The preferred way is to only update the model and let *ngIf, *ngFor, {{}}, ..., and custom components and directives that use them, do the DOM updating.
– Günter Zöchbauer
Commented Oct 4, 2016 at 5:53

Add a comment |

Community · Accepted Answer · 2017-05-23 12:25:42Z

1

As Günter states above, "In the DOM bindings won't have any effect at all". However this was true of Angular 1 as well. In Angular 1, you always had to $compile your DOM fragment before it would have any effect.

Angular 2's equivalent of $compile is a bit different, but it may help you to research along those lines. For example:

edited May 23, 2017 at 12:25

CommunityBot

11 silver badge

answered Oct 4, 2016 at 21:33

Richard Kennard

1,32511 silver badges21 bronze badges

Add a comment |

Collectives™ on Stack Overflow

Add Dynamic Attributes in Angular2

2 Answers 2

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Linked

Related