title: How to store data received from api in angular service and avoid multiple api calls?
body: <p>I am using angular (v6) service to fetch data from backend and store in a variable. I want to call the api only once and serve the data whenever required to different components. </p>
  
  <p>The problem is that I am calling getPlans() function in the service from different components to get data and for each call, I am seeing a api call in the network tab of the browser. </p>
  
  <p>How to avoid calling each time I call getPlans() function and serve the data calling the api once and storing it to a variable? </p>
  
  <pre><code>export class PlansService {
    private plansData:any = {};
  
    constructor(private httpCallService: HttpCallService, private http: HttpClient) { 
  
      this.plansData = this.httpCallService.getHttpResponse("GET_PLANS");
  
    }
    getPlans(): Observable&lt;any&gt;{
      return this.plansData;
     }
  
  }
  </code></pre>