CODEWITHSUNDEEP
angularcomponentsrefresh
Prasad Domala
Prasad Domala

Reputation: 392

Refresh component after database update in Angular 5

I have a parent component with route /home which contains a list and when a list item is clicked, I navigate to /home/edit/listid and update the database. After the database update, I am navigating back to /home. But the list is not updated until I refresh the page manually. I also tried calling dataservice.getList() after updating the database, but no luck. Below is my code. Can someone please help me identify what I am missing?

Home Component

ngOnInit() {
    this.loadList();
  }
  loadList() {
    this.dataservice.getList().subscribe(
      res => {
        this.List= res;
      },
      err => {
        console.log('Error Occoured');
        console.log(err);
      }
    );
  }

DataService getList()

getList(): Observable<any[]> {
    return this.http.post<any[]>('https://resturl/Prod/getdata', {
      'operation': 'getData'
      }
    });
  }

Edit List

this.dataservice.updateList().subscribe(
        updateAccRes => {
            this.dataservice.getList();
            this.router.navigate(['/home']);
          }
        },
        error2 => {
          console.log(error2);
        }
      );

Upvotes: 6

Views: 14652

Answers (2)

David Tram
David Tram

Reputation: 23

JavaScript's asyn is your problem. When you navigate to Home, the response of updated list has not came back yet, so you have to manually reload the page. A solution for this is to have a common variable in service which can be accessed by both components and *ngIf in your Home Component's HTML to check for updates in the common variable.

Edit List You just need to update items here. The navigation should be called inside this.dataservice.getList() to make sure it wait for the response from the getList() call.

this.dataservice.updateList().subscribe(
    updateAccRes => {
        this.dataservice.getList();
      }
    },
    error2 => {
      console.log(error2);
    }
  );

DataService getList() Create a common variable here, update it with the response from getList(), and then navigate to /home

latestList: any;
getList(): Observable<any[]> {
    return this.http.post<any[]>('https://resturl/Prod/getdata', 
        {'operation': 'getData'})
        .subscribe(response => {
             this.latestList = response.list;
             this.router.navigate(['/home']);
        },
        error => {
            console.log(error);
        }
)};

Home Component Now, after updated list comes back, we are navigated to home page, and the updated list is ready to be displayed without manually reload the page. 

listOfItems: any
constructure(private dataService : DataService){
    // latestList is accessible here because it is a property of DataService
    this.listOfItems = this.dataService.latestList;
};

home.component.html You can check for the updated list's existence here. If it exists, show it. If it does not exist, show "loading...." message.

<div class="list" *ngIf="listOfItems"> <!-- Display list here --> </div>
<div *ngIf="!listOfItems"> Loading.......... </div>

Upvotes: 1

Ester Kaufman
Ester Kaufman

Reputation: 868

You can add a service that holds the item list, And in your edit-list-component, you'll update the item in the service. That way, you'll have the same item both in main component and in edit-list-component.

Example:

class ItemsService{ 
   list: Items[]; 

   getItemById(index){
       return list[index];
   } 
   updateItemById(item, index){
       this.list[index] = item;
   }
}


class EditListComponent{
   item:Item;
   index:number;
   ...
   this.item = this.itemsService.getItemById(index);

   updateBtnClick(){
         this.itemsService.updateItemById(item, index);
   }
}

Upvotes: 0

Related Questions