Angular 2 , how to keep data in the view when switching between the routes

Question

I have a built an angular 2 app to fetch data from oracle db, and displaying it in the view, whenever i switch between the routes, everytime the view is loading to get data from DB. How can i make it fetches data only once until i click some control to fetch data.

Service:

 getTaskDetails(taskId : Number): Promise<String[]> {
    this.heroesUrl='http://localhost:3007/getTaskDetails';
    return this.http.get(this.heroesUrl+"?taskId="+taskId)
               .toPromise()
               .then(function(response){
                  console.log("Test"+response.json());
                 return response.json();
               })
               .catch(this.handleError);
  }

Component:

  getHeroes(agentID : Number,filterDateFrom : String,filterDateTo : String): void {

    this.heroService
        .getTaskByDate(taskId)
        .then((dataGSD)=>
           this.dataGdsp = dataGSD
        );

View:

<table *ngIf="dataGdsp" id="customers">
    <tr>
        <th>AGENT_ID</th>
        <th>TASK_ID</th>
        <th>PARENT_PROCESS_NAME</th>
        <th>INITIATION_POINT_NAME</th>
    </tr>
    <tr *ngFor="let d of dataGdsp; let i = index">
        <td>{{d.AGENT_ID }}</td>
        <td>{{d.BPM_INSTANCE_ID}}</td>
        <td>{{d.PARENT_PROCESS_NAME}}</td>
        <td>{{d.INITIATION_POINT_NAME}}</td>
    </tr>
</table>

Please see [Is it possible to prevent the destruction of Angular 2 components when navigating](https://stackoverflow.com/questions/42265893/is-it-possible-to-prevent-the-destruction-of-angular-2-components-when-navigatin) — Richard Matsen, Nov 03 '17 at 03:58
First thought is "use a service" but your question includes one. Following @RichardMatsen possible duplicate, I'm not familiar with the problem space but the thread leads to `RouteReuseStrategy` if you're trying to preserve components between routes: https://angular.io/api/router/RouteReuseStrategy — stealththeninja, Nov 03 '17 at 06:47

AT82 · Answer 1 · 2017-11-03T08:16:57.047

Besides the linked answers, you can use a variable in service to store the fetched data, and in your getTasksDetail check if the if there exists a value for the variable, if not, then make the http-request.

Something like this:

import {Observable} from 'rxjs/Observable';
import 'rxjs/add/observable/of';
import 'rxjs/add/operator/map';

....

// type your data instead of using 'any'
private dataGdsp: any[]; // intentionally not initialized for our conditions
// instead of above you could initialize and check the length of array instead


getTasksDetail(taskId) {
  if(!this.dataGdsp) {
    this.heroesUrl='http://localhost:3007/getTaskDetails';
    return this.http.get(this.heroesUrl+"?taskId="+taskId)
      .map(res => {
        this.dataGdsp = res.json();
        return res.json();
      })
  } else {
     return Observable.of(this.dataGdsp)
  }
}

and then in your component(s) just subscribe to this:

ngOnInit() {
  // your service call should actually look like this (?)
  this.heroService.getTasksDetail(taskId)
    .subscribe((dataGSD)=> {
      this.dataGdsp = dataGSD;
    });
}

And when you want to later update the value, you just call a method, that sets the new values to dataGdsp in the Service:

updateTasksDetail(taskId) {
  this.http.....
    .map(res => {
      this.dataGdsp = res.json();
      return res.json()
    })
}

'until i click some control to fetch data' - you perhaps need another method to bypass the cache? — Richard Matsen, Nov 03 '17 at 07:46

Angular 2 , how to keep data in the view when switching between the routes

1 Answers1