TypeError using getter and setter in Angular

Question

I am using getter and setter to set a field from the web cache, but I get the TypeError when I try to use the setter for example. The error is:

ERROR TypeError: this.saveCache is not a function

The getter and setter are below:

    get saveCache (): any {
        if (localStorage.getItem('saveCache') === null) {
          return null;
        }
        return JSON.parse(localStorage.getItem('saveCache'));
      }
      
      set saveCache(value:any) {
        localStorage.setItem('saveCache', JSON.stringify(value));
      }

When I try to set the saveCache field, I get the above error. How can I solve this issue?

I added an example here with the error:

https://stackblitz.com/edit/angular-ivy-cryfvb?file=src%2Fapp%2Fapp.component.ts

Answer 1

A setter has to be used as below:

this.saveCache = this.fruits;

and not this.saveCache(this.fruits);