I have a very simple API call when clicking on minister router link. It displays some data when minister page is open. But I see whenever I came back to that page either from the homepage or any other page the API keeps loading again.

ministerponent.ts

import { Component, OnInit } from '@angular/core';
import { ApiReadService } from "../apiReadService.service";

interface mydata{
  allMinisters: Object
}

@Component({
  selector: 'app-ministers',
  templateUrl: './ministersponent.html',
  styleUrls: ['./ministersponent.scss']
})
export class MinistersComponent implements OnInit {

  allData:Object = [];

  constructor(private apiRead: ApiReadService) {

  }
  ngOnInit(){
  this.apiRead.getData().subscribe(data=>{
            this.allData  = data.allMinisters;
    }); 
  }
}

apiReadSerivce.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/mon/Http';

@Injectable({
  providedIn: 'root'
})

export class ApiReadService {
    constructor(private http: HttpClient) { }

    getData(){
        return this.http.get('http://localhost:8081/allMinisters')
    }
}

I have a very simple API call when clicking on minister router link. It displays some data when minister page is open. But I see whenever I came back to that page either from the homepage or any other page the API keeps loading again.

minister.ponent.ts

import { Component, OnInit } from '@angular/core';
import { ApiReadService } from "../apiReadService.service";

interface mydata{
  allMinisters: Object
}

@Component({
  selector: 'app-ministers',
  templateUrl: './ministers.ponent.html',
  styleUrls: ['./ministers.ponent.scss']
})
export class MinistersComponent implements OnInit {

  allData:Object = [];

  constructor(private apiRead: ApiReadService) {

  }
  ngOnInit(){
  this.apiRead.getData().subscribe(data=>{
            this.allData  = data.allMinisters;
    }); 
  }
}

apiReadSerivce.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/mon/Http';

@Injectable({
  providedIn: 'root'
})

export class ApiReadService {
    constructor(private http: HttpClient) { }

    getData(){
        return this.http.get('http://localhost:8081/allMinisters')
    }
}

• javascript
• angular
• typescript

• there can be 2 first for the options and second actual call, clear your console and then route to that page and check how many requests are going. – Just code Commented Dec 31, 2018 at 6:27
• only 1 at a time. The api loads every time I e back to that page – Santosh Commented Dec 31, 2018 at 6:28
• ngOnInit is called every time the ponent is created... which is every time you view the page. As you are calling this.apiRead.getData in ngOnInit you need a way to cache the data, which Simon_Weaver has shown below... although there are many ways to cache data client side. – Dale K Commented Dec 31, 2018 at 6:35
• You can use this very efficiently - npmjs./package/ngx-cacheable – Tushar Walzade Commented Dec 31, 2018 at 9:47

1 Answer 1

The simplest way - if you only ever want the data to load once is something like this:

import { shareReplay } from 'rxjs/operators';

export class ApiReadService {
   constructor(private http: HttpClient) { }

   ministers$ = this.http.get('http://localhost:8081/allMinisters')
                         .pipe(shareReplay(1))

   getData() {
      return this.ministers$;
   }
} 

Once the results have been returned once it will get 'cached' by the shareReplay(1) and that same value returned each time.