title: Angular 6 - HttpClient Keeping subscribe in the service but passing the result to the component
body: <p>I have a project which contains a service (which gets the data) and a component (displays it).</p>
  <p>I would like the keep the code to the minimum on the app.component.ts.</p>
  <p>In the service I have:</p>
  <pre><code>getPosts() {
      return this.http.get('https://jsonplaceholder.typicode.com/posts', httpOptions).subscribe(
        result =&gt; {
          return result;
          this.theData = result;
        },
        error =&gt; {
          return error;
        }
      );
    }
  </code></pre>
  <p>and in my app.component.ts:</p>
  <pre><code> getPostsFromService() {
      this.myService.getPosts();
    }
  </code></pre>
  <p>But of course, I need to get the result and pass it into my component but something like this wouldn't work:</p>
  <pre><code>myData;
  
    ...
  
  
    getPostsFromService() {
      this.myData = this.myService.getPosts();
    }
  </code></pre>
  <p>So, my question is, how can I do this or is it really recommended to call subscribe on my component and not in the service?</p>