Caching Component Data in Angular 2 App

Question

I am using observables to load data in my Angular 2 app, and am now trying to figure out how to use the last cached version of the component (what's in local storage) so that when a user clicks on a new tab (leaves the component), and then re-triggers the opening of the component again (returns) - they get the last state of the component.

This is particularly important in this case partly because there are filters on the page that filter the data according to the user's selections. So when they return to the component I want those filters to still be applied to the data.

This is the call that is made from a component, where I subscribe to the observable with Angular's OnInit life cycle hook:

ngOnInit() {
    this.filtersService.getByFilter(this.page, this.pagesize, {
            'services.workflow.status' : 'consulting'
            })
            .subscribe(resRecordsData => {
                this.records = resRecordsData;
            },
            responseRecordsError => this.errorMsg = responseRecordsError);

}

And this is the observable API call from the service:

getByFilter(page, pagesize, body) {
    const headers = new Headers({ 'Content-Type': 'application/json' });
    const options = new RequestOptions({ headers: this.headers });
    return this.http.post
    (`${this.url}${this.ver}/customers/search?apikey=${this.key}&page=${page}&pagesize=${pagesize}`,
    body, options)
        .map((res: Response) => res.json())
        .catch(this.filterErrorHandler);
}
    filterErrorHandler(error: Response) {
    console.error(error);
    return Observable.throw(error.json().error || 'Server error').share();
}

I haven't run into a caching situation like this before for Angular 2. Would it be as simple as doing an if check to see if local storage contains relevant data? Or is there an Angular-specific mechanism I can use to only re-load the component under certain conditions (if the data has changed since the last time the component was opened, for instance)?

I suggest you to check ngrx with the localStorage as storage option. This way even if the user refreshes the page, they can still keep the data. — s.alem
– s.alem, Commented Jul 24, 2017 at 22:13
I love ngrx. But in this particular case it would be overkill. — Rey
– Rey, Commented Jul 24, 2017 at 22:19

DeborahK · Accepted Answer · 2017-07-24 22:12:59Z

4

There are several options:

1) Use a service. I have a simple example here: https://blogs.msmvps.com/deborahk/build-a-simple-angular-service-to-share-data/

2) Routing parameters. You can specify required, optional, or query parameters. See this for more information: Sending data with route.navigate in Angular 2

3) In your case there is another option which is to add it/re-retrieve it from local storage. But the above two options may perform better.

answered Jul 24, 2017 at 22:12

DeborahK

60.9k12 gold badges115 silver badges136 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Rey Over a year ago

Great options. I will do some more research to see which of these works best in my particular use case. Thanks!

Collectives™ on Stack Overflow

Caching Component Data in Angular 2 App

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related