title: Use Angular 2 partially with ASP.NET MVC Application
body: <p>I have an ASP.NET MVC application and want to use Angular 2 with it. I am very new to Angular 2 so I have some basic questions about it and I could not find satisfying answers for it or if my approach is even a "good" one. </p>
  
  <p>Everything is already set up and works fine. So both Technologies work with each other. Now it's only a questions on how to merge those two.</p>
  
  <p>The ASP.NET Application is a big and complex one and I do not want to make everything with Angular2 right now. In fact, there are only a few places where I want to use the Angular Framework.</p>
  
  <p>Stuff I would like to use angular for are for example multistep formulars.
  I imagined something like this:</p>
  
  <p>I have multiple Views in my ASP.NET Application:</p>
  
  <ul>
  <li>View1.cshtml</li>
  <li>View2.cshtml</li>
  <li>...</li>
  <li>ViewX.cshtml</li>
  </ul>
  
  <p>Content of View1.cshtml is a classic asp.net mvc view:</p>
  
  <pre><code>&lt;div id="contactContainer"&gt;
          &lt;div class="row"&gt;
              &lt;div class="col s12"&gt;
                  &lt;div class="input-field col s12 m12 l6"&gt;
                      @Html.TextBox("Name", null, new { @class = "validate", @placeholder = "Name" })
                      &lt;label class="formlabel" for="Name"&gt;Your Name&lt;/label&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          ....
  &lt;/div&gt;
  </code></pre>
  
  <p>View2.cshtml also contains something similar like View1.cshtml but additionally a angular component <strong>checkoutForm</strong>:</p>
  
  <pre><code> &lt;div class="row"&gt;
              &lt;div class="col s12"&gt;
                  &lt;div class="input-field col s12 m12 l6"&gt;
                      @Html.Label("Username", null, new { @class = "validate", @placeholder = "Username" })
                  &lt;/div&gt;
              &lt;/div&gt;
    &lt;/div&gt; 
    &lt;checkoutForm&gt;&lt;/checkoutForm&gt;
  </code></pre>
  
  <p>checkoutForm then would be rendered with angular and would be for example some multistep formular. This is then an own component or module i write.</p>
  
  <p>My problem now are the templates with angular. I have the app.module and app.component which is bootstrapped but how do i acchieve this with the template? </p>
  
  <p>If my app.component.ts looks like this:</p>
  
  <pre><code>import { Component } from '@angular/core';
  
  @Component({
      selector: 'my-app'
  })
  
  export class AppComponent { }
  </code></pre>
  
  <p>I think I would have to insert for example this in View2.cshtml</p>
  
  <pre><code>&lt;my-app&gt;
      &lt;checkoutForm&gt;&lt;/checkoutForm&gt;
  &lt;/my-app&gt;
  </code></pre>
  
  <p>But this is of course not parsed by angular as it seems that it does not look at the current page which is loaded. 
  So I somehow need to dynamically set the template of the app.component so that it looks at the output of the current asp.net MVC view for the component selectors. 
  Is this possible? are there better ways or should I not use angular at all for this purpose?</p>