Angular 2 - ngModel binding not working in dynamically added DOM element

Question

Consider the following piece of code

import {Component, OnInit} from 'angular2/core';
import {bootstrap, BrowserDomAdapter} from 'angular2/platform/browser';

@Component({
selector: 'app',
template: `<div id="test"></div>
<br>Current Value is: {{ name }}`
})
class App implements OnInit{
public name = "Hello World!";
constructor() {}
ngOnInit(){
    $("#test").append("<input type='text' [(ngModel)]='name'      placeholder='Enter Name' />");
}
}

bootstrap(App);

As you can see I am adding a template dynamically to the DOM and binding the name attribute to it. But the resulting input textbox is not binding with the name. I am newbie and I know this may not be the right way. If so, what could be the right way to achieve this?

How dynamic is the template? Can you simply put your dynamic template in its own child component? Then in the parent component you can use `NgIf` to conditionally add/remove it from the DOM. You can put an input property and an output property on the child component to get data in and out. — Mark Rajcok, Feb 24 '16 at 21:08
Ops! My bad I just solved my problem I feel so stupid. I used ngFor to generate multiple input fields and bind their values. Thank you. — Eesa, Feb 25 '16 at 20:17

score 0 · Answer 1 · answered Feb 24 '16 at 19:58

0

Creating HTML on-the-fly including binding isn't supported.

After adding the HTML you can query the element and add an event handler imperatively to get notified about changes in the input and update the value imperatively when name changes.

answered Feb 24 '16 at 19:58

Günter Zöchbauer

623,577
216
2,003
1,567

That make sense. Can you give me an example? – Eesa Feb 24 '16 at 20:01
You shouldn't do this in Angular2. Using jQuery and direct DOM access is discouraged. This is the reason I don't play with such things myself. Do you really need this? You can inject `constructor(private elementRef:ElementRef)` and with `elementRef.nativeElement` you can access the DOM. From there its pure HTML/JS and not Angular related. – Günter Zöchbauer Feb 25 '16 at 07:58
So you're saying that if I manipulate DOM using ElementRef service and not using jquery then ngModel will work? – Eesa Feb 25 '16 at 20:08
No, what I say is that jQuery shouldn't be used and that `ngModel` or other directives, components or bindings can't be used at all for dynamically added HTML. You should reconsider your approach and use for example DynamicComponentLoader as mentioned in a comment to your question above. – Günter Zöchbauer Feb 25 '16 at 20:11

score 0 · Accepted Answer · edited May 23 '17 at 10:30

If you want dynamic templateing, I would suggest to create components with the HTML you want to insert and instantiate it dynamically.

This way in that component you can do your binding as you wish and hook it up with your component.

This can be done with DynamicComponentLoader. When you create a new component a Promise is returned and you can access the instantiated component to add parameters or hook up EventEmitters.

For more detail you can check my question, which was answered. I updated my question with a working solution to which I got to.

Angular2 DynamicComponentLoader with parameters

Angular 2 - ngModel binding not working in dynamically added DOM element

2 Answers2