Angular2- Update UI after deleting

Question

I have an angular2 app whose backend is in java. I have a list of customers. When i click to remove a customer , the customer is removed but the list does not update. If i manually refresh the page then the list updates. I tried routing to the list component in the subscribe of delete method but that does not work.

list-customers.component.html

<tr [class.warning]="customer.isDefault == 1" *ngFor="let customer of customers | orderBy:['firstName'] | search:searchCustomer.value;let serial = index">
                <td>{{ serial+1 }}</td>
                <td>{{ customer?.firstName+' '+customer?.lastName}}</td>
                <td>{{ customer.email}}</td>
                <td>{{ customer.mobileNumber}}</td>
                <td>{{ customer.streetAddress}}</td>
                <td>{{ customer.priceList?.name}}</td>
                <td><a [routerLink]="['/loggedIn','customer','edit', customer.id ]"><i class="fa fa-edit fa-2x"></i></a></td>
                <td><a (click)="delete(customer)"><i class="fa fa-trash-o fa-2x"></i></a></td>
              </tr>

list-customers.component.ts

    ngOnInit()
    {
        this.refreshCustomersList();
    }

    delete(customer)
    {
        this.userService.delete(customer.id)
            .subscribe(
                success=>
                {
                    var index = this.customers.indexOf(customer, 0);
                    if (index > -1)
                    {
                        this.customers.splice(index, 1);
                    }
                }
            )

    }

    refreshCustomersList()
    {
        this._authHttp.get(
                this.appService.getApiUrl() + "api/customer/list"
            )
            .map(res=>res.json())
            .subscribe(
                successResponse=>
                {
                    this.customers = successResponse.data.customers;
                },
                () => console.log("Request Completed")
            )

    }
}

patelarpan · Accepted Answer · 2019-03-29 09:02:26Z

6

Try calling this.refreshCustomersList(); in your delete function like this:

    delete(customer)
{
    this.userService.delete(customer.id)
        .subscribe(
            success=>
            {
                var index = this.customers.indexOf(customer, 0);
                if (index > -1)
                {
                    this.customers.splice(index, 1);
                    this.refreshCustomersList();
                }
            }
        )

}

This will update the customers array after a customer is removed.

edited Mar 29, 2019 at 9:02

patelarpan

8,1513 gold badges23 silver badges25 bronze badges

answered Sep 16, 2016 at 15:41

jhhoff02

1,2201 gold badge18 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

patelarpan · Accepted Answer · 2019-03-29 09:18:42Z

1

you can use JavaScript array filter like this.

    this.userService.delete(customer.id)
    .subscribe(
        success=>
        {

             let newCustomers = this.customers.filter(item => item.id !== customer.id);
             this.customers = newCustomers;
        }
    )

answered Mar 29, 2019 at 9:18

patelarpan

8,1513 gold badges23 silver badges25 bronze badges

2 Comments

Asamoah Over a year ago

I think this is the most elegant and straightforward solution, although for simplicity's sake, I did: this.customers = this.customers.filter(item => item.id !== customer.id);, instead of assigning first to a variable.

patelarpan Over a year ago

that's great @Asamoah

Alok Kamboj · Accepted Answer · 2018-03-21 07:37:19Z

0

Splice will return the deleted element instead use slice to return the resulted array after deletion, like :-

this.customers = this.customers.slice(index);

answered Mar 21, 2018 at 7:37

Alok Kamboj

1,02711 silver badges12 bronze badges

Comments

Abhinav Saxena · Accepted Answer · 2019-03-29 07:37:07Z

0

Enter the following code In HTML:

(click)="delete(customer.length-1-i)".
//
deleteFieldValue(index) {
this.customer.splice(index, 1);
this.revervefordispaly();
}

//for reverse:

revervefordispaly(){
this.reversedProductdata.reverse();
}

edited Mar 29, 2019 at 7:37

Abhinav Saxena

2,0542 gold badges27 silver badges56 bronze badges

answered Mar 29, 2019 at 6:09

Richa

211 bronze badge

Comments

Sunny Vakil · Accepted Answer · 2021-04-23 00:08:27Z

I have almost same case, I have an array of products. I have to let users to remove product as per their choices. in the end if there is no product in array then I need to show Cancel button instead of the Back button without reloading page.

I got it done by checking for empty array in ngAfterViewChecked() life cycle hook.

products: Product[];
someCondition: boolean;

constructor(private cdr: ChangeDetectorRef) {}
// import { ChangeDetectorRef } from '@angular/core';

ngAfterViewChecked() {
    this.emptyArray();
}

emptyArray() {
    this.someCondition = this.products.length === 0 ? true : false;

    // run change detection explicitly
    this.cdr.detectChanges();
}

removeProduct(id) {
    // your logic for removing product.
}

Rajat Malhotra · Accepted Answer · 2018-03-15 08:36:36Z

-1

Instead of getting the whole list from the API again we can set the customers list as follows. It worked for me:

delete(customer)
{
    this.userService.delete(customer.id)
        .subscribe(
            success=>
            {
                var index = this.customers.indexOf(customer, 0);
                if (index > -1)
                {
                    this.customers = this.customers.splice(index, 1);
                }
            }
        )

}

answered Mar 15, 2018 at 8:36

Rajat Malhotra

194 bronze badges

Collectives™ on Stack Overflow

Angular2- Update UI after deleting

6 Answers 6

Comments

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related