Cache Angular Component

Question

I have two angular components. The first component has a list with picture items requested from a server. When the user selects one picture he is forwarded to the second page, the detail view, where more information is displayed. Now when he is hitting the browser's back button component 1 loads again and fires some heavy request for getting the pictures.

Is there a way I can cache component 1 so when the user hits the browser's back button component 1 is restored and the server request are not sendend again? I have read about Angular Route Reuse Strategy but I guess this applies not for browser navigation?

If your http call is done from a service (so not inside the component itself), the service will stay alive and you can easily do a shareReplay on the observable. That will prevent the call a second time and just reuse the previously emitted value. — MikeOne
– MikeOne, Commented Jul 14, 2020 at 14:30

Edoardo Pacciani · Accepted Answer · 2020-07-14 15:07:34Z

0

Just store the items in a variable inside a service

answered Jul 14, 2020 at 15:07

Edoardo Pacciani

2092 silver badges7 bronze badges

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

Comments

René Winkler · Accepted Answer · 2023-04-28 13:08:09Z

0

Use a RouteReuseStrategy

https://angular.io/api/router/RouteReuseStrategy

It allows to cache entire components and when you hit the back button, the cached component is restored and no requests are sent again.

This goes in more detail: https://blog.bitsrc.io/angular-route-reuse-strategy-c7939ebbf797

answered Apr 28, 2023 at 13:08

René Winkler

7,2388 gold badges48 silver badges76 bronze badges

Comments

Roksarr · Accepted Answer · 2023-04-28 14:04:05Z

To prevent unnecessary data reloading when navigating back to Component 1, store the data retrieved from the server in a service using a BehaviorSubject. This allows both components to access the stored data and eliminates the need for additional requests. Using a BehaviorSubject ensures components always have the most recent data.

This approach improves user experience by avoiding unnecessary server requests and resulting in a faster, more efficient system.

For example:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { BehaviorSubject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class PictureService {
  private pictureData = new BehaviorSubject<YOURPICTUREDATATYPE | null>(null);

  constructor(private http: HttpClient) { }

  getPictureData() {
    return this.pictureData.asObservable();
  }

  loadPictureData() {
    this.http.get('https://example.com/picture-data').subscribe((data: any) => {
      this.pictureData.next(data);
    });
  }
}

Collectives™ on Stack Overflow

Cache Angular Component

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related