Observable table not updated after added new item

Question

I make simple CRUD app for exercise and I have problem with update table automatically.

I call data from API, and also post new data to API. In-app I showing table list with ng-bootstrap, and for add new item I use the bootstrap modal box.

In my service here is my code for geting all users and add new user

getUsers(): Observable<UserModel[]> {
return this.httpClient.get<UserModel[]>(environment.BASE_URL + this.apiurlAllUsers).pipe(
  tap(data => console.log(data)),
  catchError(this.handleError)
);
}


updateUser(formData) {
this.httpClient.post(environment.BASE_URL + "user/add/", formData)
.subscribe(response => this.getUsers(), error => console.log(error));
}

and here is code from user.component

getUsersInList() {
this.allUsers = [];
this.userService.getUsers().subscribe((data: any[]) => {
  this.collectionSize = data.length;
  this.allUsers = data;
});
}

//passing formData from modal box to service

modalRef.result
  .then(result => {
    this.userService.updateUser(result);
  })
  .catch(error => {});
}

After a refreshing page, new data is in a table, but how to get it without refresh? Pls if someone can me explain what Im doing wrong? Thnx

Answer 1

Update your service method to return observable

updateUser(formData) {
 return this.httpClient.post(environment.BASE_URL + "user/add/", formData);
}

then in users component

modalRef.result
  .then(result => {
    this.userService.updateUser(result).subscribe((data)=>{
    this.getUsersInList()
    });
  })
  .catch(error => {});
}

Also remove this.allUsers = []; from your getUsersInList bcs it will empty the list and ui will show blank page until data loaded