Angular 2 change template input values on click

Question

Working with a set of column components with id input in my template:

<div class="panel-body" *ngIf="columns">
  <div class="col-md-4">
      <column [id]=columns[current_left_column].Id></column>
  </div>
  <div class="col-md-4">
      <column [id]=columns[current_middle_column].Id></column>
  </div>
  <div class="col-md-4">
      <column [id]=columns[current_right_column].Id></column>
  </div>
</div>

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.

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.

Answer 1

I think you need to change the name of the input. I have seen it several times that it collides with the id property every HTML element has.

Answer 2

I really appreciate the comments and info given, it helped me get a better handle on what I was actually trying to do.

I ended up taking an example from a different answer and using ngModel with an input to show the individual column id's. Then since I could prove my id's were switching but it wasn't updating even with the tick() I realized I was working on one component level too high and had to be initiating the change from the Column level. So I took the ngOnInit method that populates the columns with data and put it in a ngOnChanges() method, cleared the OnInit() because it was doubling up, and it started moving fine.

Then I had to deal with the information from the columns being added on top of the prior column, but that was relatively minor.

ngOnChanges(){
  this._columnService.GetSingleColumn(this.id).subscribe(column => { this.columnData = column; });
  this._cardService.GetCardsByColumnId(this.id).subscribe(cards => { this._cardColumnService.LoadCards(cards); console.log(this.cards); });
  if (this.columnData == undefined) {
    this.LoadDummyData();
  }
}