Angular 2.0 dynamically generated UI

Hello! I want to utilize Angular2 with ASP.NET MVC (not core). My goal is to generate UI on the server side. I have a model and I can generate a markup base on it.

I have couple of Angular2 components:

//1
@Component({
selector: 'my-app',
template: `<h1>Angular</h1>`
})
export class AppComponent {}

//2
@Component({
selector: 'my-text',
template: `<div><input type="text" placeholder="default"/></div>`
})
export class MyTextComponent {}

I generating markup with MVC (razor engine) to something like this:

<my-app>
   <my-text> </my-text>
   <my-text> </my-text>
   <my-text> </my-text>
   ...
   <my-text> </my-text>
</my-app>

Unfortunately when angular application started my markup transforms in to

<my-app><h1>Angular</h1></my-app> When I add markup in to AppComponent template, like this:

 template: `<h1>Angular</h1> 
   <my-text> </my-text>
   <my-text> </my-text>
   <my-text> </my-text>
   ...
   <my-text> </my-text>`

everything works fine - selectors are processed by angular. Why does this happend, and how to utilize MVC markup? I expected that angular2 recieved markup MVC and processed it.

toddmotto / ama

Angular 2.0 dynamically generated UI #51