title: Angular2 - How to use one way databinding to bind to JSON attribute
body: <p>I try to use Angular2's one way databinding to bind an input field value to a JSON property.<br>
  The JSON object looks like this:</p>
  
  <pre><code>[
    {
      "name": "my name",
      "list": [
        {
          "date": "0101970",
          "list": [
            {
              "timespan": "6-7",
              "entries": [
                {
                  "name": ""
                },
                {
                  "name": ""
                },
                {
                  "name": ""
                }
              ]
            }
          ]
        }
      ]
    }
  ]
  </code></pre>
  
  <p>I want to bind the value to a specific <code>name</code> attribute of <code>entries</code>.<br>
  This is how I try to do the on way binding:</p>
  
  <pre><code>&lt;div class="col-md-4" *ngFor="#category of categories"&gt;
          &lt;div&gt;
              &lt;div class="col-md-12"&gt;
                  &lt;h1&gt;{{category.name}}&lt;/h1&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div *ngFor="#listentry of category.list"&gt;
              &lt;div class="row"&gt;
                  &lt;div class="col-md-12"&gt;
                      &lt;h2&gt;{{listentry.date}}&lt;/h2&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="row" *ngFor="#shift of listentry.list"&gt;
                  &lt;div class="row"&gt;
                      {{shift.timespan}}
                  &lt;/div&gt;
                  &lt;div class="row" *ngFor="#entry of shift.entries"&gt;
                      &lt;div class="col-md-10"&gt;
                          &lt;input type="text" class="form-control" (ngModel)="entry.name"&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt; 
  </code></pre>
  
  <p>This is my Component:</p>
  
  <pre><code>export class InputComponent {
  
  public categories:Category[];
  
  constructor(private _dataService:DataService) { 
   // ... fetch data from the service here
  }
  }
  </code></pre>
  
  <p>As I understand the databinding in Angular2 <code>(ngModel)="attribute"</code> binds from the view to the model and <code>[ngModel]="attribute"</code> binds the other way around.<br>
  So, what is wrong with my <code>&lt;input type="text" class="form-control" (ngModel)="entry.name"&gt;</code> then?    </p>
  
  <p>I could use two way databinding instead of course, but I have some other constraints (disabling form elements) which just apply after a button was pressed and not on the user input.</p>