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

Create service like this,

@Injectable()
export class DataService {
  public data = null;
}

add it in providers list in app.module.ts

and inject it into both components constructor like,

export class UserComponent {
    constructor(private dataService: DataService)
}

and when any of the component gets loaded just check if data is null if not make api call and also update data so that later service will not fetch it again.