Number of elements is not changed in EventEmitter

Question

The component Grid is like below:

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
        });
     }

}

So, when a value is changed or deleted, the EventEmitter emits the current state of data to the container component. When a value is changed, it is correctly sent to the container component, so it works. However, if an element is filtered (and which is effectively filtered in Grid Component), the emitted data has still the same number of items.

This is the container components initialization:

<grid [title]="'This is the grid title'" (modelChanged)="dataChanged(data)"></grid>

What can be wrong?

Answer 1

Use () => instead of function ()

private deleteItem() {
    this.data = this.data.filter((e) => {
        return e !== this.toBeDeletedItem;
    });
    this.emitChangedData();
}

to ensure this. keeps pointing to the current class.

update according to comments

<grid (modelChanged)="dataChanged($event)"></grid> 

instead of

<grid (modelChanged)="dataChanged(data)"></grid>