MrNew MrNew - 1 year ago 315
Javascript Question

Angular2 how to delete element in ngFor

How can I delete an element from an

? I have this
of items which has an
as well which I'm passing in the
function so It'd know which item I'm clicking.

getOrdersFromOrigin() {
.subscribe(data => {
this.isLoading = false;
this.orderPreparing = data.Results

<div class="preparing" *ngFor="let prepare of orderPreparing">
<p> {{ prepare.Item }} </p>
<button class="btn btn-primary" (click)="updateOrder(prepare.Id)">It's Ready</button>

In my
I don't have anything in my updateOrder function as I'm not sure how to delete an element relative to the
I pass in the
event, it's giving me the
just fine.

updateOrder(id) {
console.log('Delete from Prepare Panel', id);

Answer Source

I guess what tou're looking for is deleting it from orderPreparing object (if you, of course, don't have a back-end for deleting it). You can try this one:

updateOrder(id) {
    for(item in orderPreparing) {
        if(item[id] == id) {
            delete this.orderPreparing.item;

If you have a back-end app for it, you need to check if there is a script to delete the order on your back-end, made a function to call in your service which is responsible for the communication with your api, then include the service in your component, call a function to delete the order and update the orders once again.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download