Issue with removing newly added element from array

Question

Okay, let me explain what my issue is:

this is my component class :

export class DataArray implements OnInit {
    private data: string[] = [];
    addData(msg: string) {
        this.data.push(msg);
    }
    deleteMsg(index: number) {
        console.log(" that is my element which i when to remove data[index]=" + this.data[index]);
        this.data.splice(index, 1);
    }
}

It's simply two methods: one to a add new element in my array of string and one to remove element from my array.

and my component HTML

<div class="row" *ngFor="let element of data;let i = index">
    {{element}}
    <button class="btn btn-md btn-success" (click)="addData(element)">ADD ELEMENT
    </button>
    <button class="btn btn-md btn-danger" (click)="deleteMsg(i)">Remove ELEMENT
    </button>
</div>

The function addData is working fine and the function deleteMsg also, but the dilemma comes when I try to remove a newly added element, I can't remove it, it stays in the array data.

If anyone can suggest a solution, it would be very useful for me.

Answer 1

try this

deleteMsg(index:number)
{
  this.data.splice(index, 1);
  this.data = [...this.data];
}