The Grid component is structured as follows:
export class GridComponent {
@Output('modelChanged') modelChangedEmitter = new EventEmitter();
private valueChanged(newValue: any, item: Object, prop: string) {
item[prop] = newValue;
this.emitChangedData();
}
private deleteItem() {
this.data = this.data.filter(function (e) {
return e !== this.toBeDeletedItem;
});
this.emitChangedData();
}
private emitChangedData() {
this.modelChangedEmitter.emit({
data: this.data
});
}
}
When a value is changed or deleted, the EventEmitter sends the current data state to the container component. The value changes are properly transmitted to the container component, but if an element is filtered out (as done in the Grid Component), the emitted data still contains the same number of items.
This is how the container component is initialized:
<grid [title]="'This is the grid title'" (modelChanged)="dataChanged(data)"></grid>
What could be causing this issue?