Is there a way to make multiple functions/value assignment execute synchronously in Angular 8?

Question

I have a component that displays data, and if one wishes to edit/add data, they can do so under certain fields using a text box with a cancel/save button below.

Due to the fact that I am using a third party product in development, I do not have complete access to the code. In order to get the desired functionality, I need to change the behavior.

What I want is for the value in the displayed data table to reflect the changes made by the user. For example, if I change a default "name" value from, say, "default name" to "my name" in the given text box, when I hit save, and the text box disappears showing that data again, it should say "my name" not "default name". As of how it is now, it just says "default name" until the page is refreshed.

My idea was this: add my own function which makes its own patch request to the back end, replacing the third party product's own function that comes with the custom element. On success, my function does the following:

newData = "";

patchMyData(event: string, thirdPartyData: any) {
    const dataObj = {
      ...
    }
    this.myService.patchData(dataObj)
      .subscribe((res: any) => {
        // sets data to user entered value on success
        this.newData = event;
      },
      (error: any) => {
        // Sets data to previous value on failure
        this.newData = thirdPartyData.item.data;
      })
  }

In the template, I have the following:

<third-party-custom-element
  ...
  (changeData)="patchMyData($event, thirdPartyData);thirdPartyData.item.data = newMemo;"
>
</third-party-custom-element>

thirdPartyData.item.data being the variable the third party product uses to display that particular value in the template.

Unfortunately what I think I'm finding is that the thirdPartyData.item.data = newMemo part on the template executes before patchMyData($event, thirdPartyData) can finish executing and set the newData variable, so the element will always show the previous value.

Is there a way to make sure the value is set after the function runs? Or another solution that might be better, taking into account that I cannot access the full code given the third party product involved?

Thanks!

instead newMemo as string, can you turn it into an observable? so you then you can use async in the template? (e.g patchMyData($event, thirdPartyData);thirdPartyData.item.data = newMemo | async;) — roger
– roger, Commented Dec 2, 2019 at 23:03

Community · Accepted Answer · 2020-06-20 09:12:55Z

If I understand your problem correctly, you need to execute a code after a 3rd party asynchronous function completes. I can think of a few solutions.

Make sure that the 3rd party function does not return an Observable. If it does then you can subscribe to it.
Make sure the 3rd party component does not implement any output event that emits on finish (check documentation).
If you wish to use your replacement function, put the code you wish to be executed last inside your this.myService.patchData(dataObj).subscribe

If you wish to keep your code outside this function you can change it a bit to return observable. To do so, you can use tap operator instead of subscribe.

return this.myService.patchData(dataObj)
 .pipe(tap(res: any) => {
    // sets data to user entered value on success
    this.newData = event;
  },
  (error: any) => {
    // Sets data to previous value on failure
    this.newData = thirdPartyData.item.data;
  }))

Then:

(changeData)="patchMyData($event, thirdPartyData).subscribe(()=>{thirdPartyData.item.data = newMemo})

Collectives™ on Stack Overflow

Is there a way to make multiple functions/value assignment execute synchronously in Angular 8?

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related