title: Angular 2 change template input values on click
body: <p>Working with a set of column components with id input in my template:  </p>
  
  <pre><code>&lt;div class="panel-body" *ngIf="columns"&gt;
    &lt;div class="col-md-4"&gt;
        &lt;column [id]=columns[current_left_column].Id&gt;&lt;/column&gt;
    &lt;/div&gt;
    &lt;div class="col-md-4"&gt;
        &lt;column [id]=columns[current_middle_column].Id&gt;&lt;/column&gt;
    &lt;/div&gt;
    &lt;div class="col-md-4"&gt;
        &lt;column [id]=columns[current_right_column].Id&gt;&lt;/column&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I have buttons that increment and decrement the columns by changing the values of current_left_column, current_middle_column, and current_right_column.  When I click those buttons I log the values of the three column id's and they're representative of where they should be however the template doesn't reload.  </p>
  
  <p>I did attempt to use ApplicationRef.tick() to trigger change detection, but the fact that it didn't change makes me think it's a binding issue, but I'm thus far unable to find anything that matches my case as 2-way binding seems to necessitate a more traditional input element and it currently is one way bound.</p>