How to store data received from api in angular service and avoid multiple api calls?

This can be done with RxJs's shareReplay(). According to the Changelog,

shareReplay returns an observable that is the source multicasted over a ReplaySubject. That replay subject is recycled on error from the source, but not on completion of the source. This makes shareReplay ideal for handling things like caching AJAX results, as it's retryable. It's repeat behavior, however, differs from share in that it will not repeat the source observable, rather it will repeat the source observable's values.

Which makes the user of shareReplay() perfect for your use case.

Remember to import shareReplay() on your service too.

import { shareReplay } from 'rxjs/operators';
.
.

export class PlansService {
  private plansData: Observable<any>;

  constructor(private httpCallService: HttpCallService, private http: HttpClient) { 

    this.plansData = this.httpCallService.getHttpResponse("GET_PLANS")
      .pipe(
        shareReplay()
      );

  }

  getPlans(): Observable<any>{
    return this.plansData;
   }

}

Then, you can return the observable on the componenet that requires it, and if you look at the network request tab on your Inspect Element tool, no additional HTTP requests are fired since the observable with the cached values are returned everytime getPlans() is called.

You can use ReplaySubject or BehaviorSubject to get that working, if you use ReplaySubject you have to specify how many old values you want to store so subscribers can access later, BehaviorSubject can keep only the last value

 import { ReplaySubject } from 'rxjs';

 ....
 @Injectable()
 export class SharedService {
 plans$: Observable<Plan[]> = this.plansSubject.asObservable(); 
 private plansSubject = new ReplaySubject<Plan[]>(1);

 constructor(private http: HttpClient) { }
 getPlans(){
   this.http.get().subscribe(res => this.plansSubject.next(res.plans)); // get array of plans
 }
}

and you can get your data in your components like this:

constructor(private sharedService: SharedService) { }

ngOnInit() {
 this.sharedService.getPlans(); // to get called only the first time to get data
 this.service.plans$.subscribe(...); // you have your data here without anu additional http call 
}

and in case you want to refresh the data, you can call the method

this.sharedService.getPlans();

for BehaviorSubject it's exactly the same thing, here what will change

plans$: Observable<Plan[]> = this.plansSubject.asObservable(); 
private plansSubject = new BehaviorSubject<Plan[]>;

you can subscribe inside your component to get the data or you can access it using BehaviorSubject.value

constructor(private sharedService: SharedService) { }

ngOnInit() {
 this.service.plans$.subscribe((plans) => console.log(plans));
 // or access the value directly
 console.log(this.service.plans$.value)    
}