In the zone.. ngZone?

When I was at my senior year at University, my group and I decided to use NextJS as our frontend framework for our capstone project. I was introduced to SWR wherein I also had to learn it because it was our primary tool for Data Fetching. It was easy to learn and integrate with our project; acknowledging the fact that my groupmates were also brilliant people themselves to have been able to work with new technologies such as SWR.

However, when I further learned about Angular, I also had to learn how a certain project would retrieve data from the server. It definitely was not using SWR, of course. I previously worked on a certain functionality that would update an attribute of a certain class and later on open the item that stored the updated attribute.

It went something like this:

public openTheItem(updatedValue: someClass){
    this.someService.getItemData(updatedValue.itemId).subscribe(result => {
        let itemData: someClass = result;
        itemData.isOpened = true;
        this.someModel.updateItemDataFromItems(updatedValue.itemId);
    });
    this.router.navigate(['item', 'user']);
}

There are two things that I expect to happen when openTheItem is executed. First, the itemData would be updated and then passed to the server. Second, I would be navigated to a new page which contains the content of the now updated itemData. However, what happened was that, only the first set of actions was executed. The display, on my end, never happened. I wondered why. I said earlier that I used SWR for data fetching for our NextJS application - which made the updating of display seamless as the components themselves would be updated. No refresh needed.

Now, why did this problem happen?

Let's look into the fact that I retrieved data from the server in the line this.someService.getItemData(updatedValue.itemId).... It seems that in this line, my code might have went out of the Angular Zone. The Angular Zone is a vital mechanism that is used by Angular to keep track of my changes. Imagine this, if I threw my dog's toy far away from our house and my dog chased it, I would not know if my dog was able to catch it because I couldn't see him.

The Angular Zone sort of acts like a wrapper around the code to allow Angular to keep track of what is happening. But in my code, it seems that I just let my code go out of the Angular Zone in which Angular was not able to keep track of the changes and therefore, not updating the display on my end.

Now, I tried using ngZone which is a class in Angular that encloses code within the Angular Zone to make sure that Angular is able to keep track of the changes that are happening.

public openTheItem(updatedValue: someClass){
    this.ngZone.run(() => {
      this.someService.getItemData(updatedValue.itemId).subscribe(result => {
        let itemData: someClass = result;
        itemData.isOpened = true;
        this.someModel.updateItemDataFromItems(updatedValue.itemId);
    });
    this.router.navigate(['item', 'user']);
}

With the code above, Angular is able to execute the server retrieval within its zone, be able to keep track of the changes, and the view would be updated.

Photo by Markus Spiske on Unsplash