Reduce Same http Network call on multiple Component

Question

I have 2 components UsersComponent and HelloComponent.

I am calling the same service with the same api calls on both the component.

But I want is that if UsersCo

Answer 1

This is called as cold observables. Whenever you subscribe to it, it'll make a new HTTP request.

Because every time you return a new http.get call.

The solution here is to return the same pointer to that observable every time.

@Injectable()
export class AppService {

  private data$: Observable;

  constructor(private http: HttpClient) {}

  getData() {
     if (!this.data$) {
        this.data$ = this.http.get('https://jsonplaceholder.typicode.com/posts');    
     }
     return this.data$;
  }
}

However, you can use rxjs share operator as well.