*ngFor Two-Way Data Binding - Angular

167 views Asked by At

I have a BoardComponent with several nested BoardColumnComponent:

<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)"></app-board-column>

and the BoardColumnComponent with the following fields:

private _boardColumn: IBoardColumn;
@Output() boardColumnChange: EventEmitter<IBoardColumn> = new EventEmitter<IBoardColumn>();


@Input() 
set boardColumn(column: IBoardColumn){
    this._boardColumn = Object.assign(this.defaultColumn, column);
    this.boardColumnChange.emit(this._boardColumn);
}

get boardColumn() : IBoardColumn {
    return this._boardColumn;
}

So I'm facing 2 issues,

  1. I need to intercept the setter of the boardColumn model to merge it with defaultBoardColumn.

  2. With my current approach my app hangs, I suppose because of a recursive emit.

Additional Data

I've also tried the usual approach but the board doesn't change

@Output()
boardColumnChange = new EventEmitter<IBoardColumn>();
@Input()
boardColumn: IBoardColumn

If there is a different approach to fulfill this or something I'm missing, I'll be grateful.

0

There are 0 answers