title: how to avoid multiple http requests when same component is used twice
body: <p>How to avoid multiple http requests when same component is used twice in template</p>
  
  <p><a href="https://stackblitz.com/edit/angular-8sgrgz" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-8sgrgz</a></p>
  
  <p>hello component is used twice in the template and its making calling service method for http data </p>
  
  <pre><code>  return this.http
      .get('https://api.openweathermap.org/data/2.5/weather? 
        q=London&amp;appid=517c7bbf790248290ad52d57725c4d5f')
      .map((res) =&gt; {return res.json()})
                    .catch((error:any) =&gt; 
                         Observable.throw(error.json().error || 'Server 
       error')).share();} 
  
  the http request should happen only once 
  but its happening more than once
  </code></pre>