title: Binding from mvc model to angular2 component (Components in mvc project)
body: <p>I could use some help, figure out how to pass model data from mvc application to a angular2 component running inside mvc. </p>
  
  <p>Lets say I have a cs.html file that has an component</p>
  
  <pre><code>&lt;my-app&gt;&lt;/my-app&gt;
  </code></pre>
  
  <p>This will load the angular2 component. I need to generate some binding to keep mvc models intact with my angular2 models.</p>
  
  <p>First of all, I'm trying to pass a model to the component via the Input property. </p>
  
  <p><strong>CSHTML file:</strong></p>
  
  <p>In the top of my cshtml file, I have:</p>
  
  <pre><code>@model MainModel
  &lt;script&gt;
      var model = @Html.Json(Model.Form.PassengerModel);
  &lt;/script&gt;
  </code></pre>
  
  <p>I want to pass this model to my angular2 component.
  What I have tried are:</p>
  
  <pre><code>&lt;my-app passengerModel="model"&gt;&lt;/my-app&gt;
  </code></pre>
  
  <p><strong>Angular2 component:</strong></p>
  
  <pre><code>import { Component, Input } from '@angular/core';
  
  @Component({
      selector: 'my-app',
      templateUrl: './Content/Scripts/angular2components/app.component.html',
  })
  export class AppComponent {
      @Input() passengerModel: PassengerModel;
  
      constructor() {
          console.log("Model loaded?: " + this.passengerModel);
  
      }
  
  }
  
  export class PassengerModel {
      constructor(
          public Adults: number,
          public Children: number
      ) { }
  }
  </code></pre>
  
  <p>The problem is that the model is undefined always. Is there any way to pass a model in to the component?</p>