Angular 2-ngModel绑定在动态添加的DOM元素中不起作用

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?

Answer 1

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.

Answer 2

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