title: *ngFor Two-Way Data Binding - Angular
body: <p>I have a <code>BoardComponent</code> with several nested <code>BoardColumnComponent</code>:</p>
  
  <pre><code>&lt;app-board-column class="col-sm-12 col-md-3" *ngFor="let column of board.middleColumns ; index as i" [(boardColumn)]="board.middleColumns[i]" (onRemoveClick)="removeColumn(column)"&gt;&lt;/app-board-column&gt;
  </code></pre>
  
  <p>and the <code>BoardColumnComponent</code> with the following fields:</p>
  
  <pre><code>private _boardColumn: IBoardColumn;
  @Output() boardColumnChange: EventEmitter&lt;IBoardColumn&gt; = new EventEmitter&lt;IBoardColumn&gt;();
  
  
  @Input() 
  set boardColumn(column: IBoardColumn){
      this._boardColumn = Object.assign(this.defaultColumn, column);
      this.boardColumnChange.emit(this._boardColumn);
  }
  
  get boardColumn() : IBoardColumn {
      return this._boardColumn;
  }
  </code></pre>
  
  <p>So I'm facing 2 issues, </p>
  
  <ol>
  <li><p>I need to intercept the <code>setter</code> of the boardColumn model to merge it with <code>defaultBoardColumn</code>.</p></li>
  <li><p>With my current approach my app hangs, I suppose because of a recursive emit.</p></li>
  </ol>
  
  <p><strong>Additional Data</strong></p>
  
  <p>I've also tried the usual approach but the board doesn't change</p>
  
  <pre><code>@Output()
  boardColumnChange = new EventEmitter&lt;IBoardColumn&gt;();
  @Input()
  boardColumn: IBoardColumn
  </code></pre>
  
  <p>If there is a different approach to fulfill this or something I'm missing, I'll be grateful.</p>