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

Answer 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>

Answer 2

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:

• Equivalent of $compile in Angular 2

• How can I use/create dynamic template to compile dynamic Component with Angular 2.0?