title: Angular2: How to subscribe to Http.post observable inside a service and a component properly?
body: <p>For a JWT authentification, I make a post request to get the token using the new <code>Http</code> module working with Observables now.</p>
  
  <p>I have a simple <code>Login</code> component showing the form:</p>
  
  <pre><code>@Component({
  selector: 'my-login',
      template: `&lt;form (submit)="submitForm($event)"&gt;
                  &lt;input [(ngModel)]="cred.username" type="text" required autofocus&gt;
                  &lt;input [(ngModel)]="cred.password" type="password" required&gt;
                  &lt;button type="submit"&gt;Connexion&lt;/button&gt;
              &lt;/form&gt;`
  })
  export class LoginComponent {
      private cred: CredentialsModel = new CredentialsModel();
  
      constructor(public auth: Auth) {}
  
      submitForm(e: MouseEvent) {
          e.preventDefault();
          this.auth.authentificate(this.cred);
      }
  }
  </code></pre>
  
  <p>I have a <code>Auth</code> service making the request:</p>
  
  <pre><code>@Injectable()
  export class Auth {
      constructor(public http: Http) {}
  
      public authentificate(credentials: CredentialsModel) {
          const headers = new Headers();
          headers.append('Content-Type', 'application/json');
  
          this.http.post(config.LOGIN_URL, JSON.stringify(credentials), {headers})
              .map(res =&gt; res.json())
              .subscribe(
                  data =&gt; this._saveJwt(data.id_token),
                  err =&gt; console.log(err)
              );
      }
  }
  </code></pre>
  
  <p>Works well but now I want to display error messages inside my component so I need to subscribe in 2 places (<code>Auth</code> for managing success and <code>Login</code> for managing error).</p>
  
  <p>I achieved it using <code>share</code> operator:</p>
  
  <pre><code>public authentificate(credentials: CredentialsModel) : Observable&lt;Response&gt; {
      const headers = new Headers();
      headers.append('Content-Type', 'application/json');
  
      const auth$ = this.http.post(config.LOGIN_URL, JSON.stringify(credentials), {headers})
                              .map(res =&gt; res.json()).share();
  
      auth$.subscribe(data =&gt; this._saveJwt(data.id_token), () =&gt; {});
  
      return auth$;
  }
  </code></pre>
  
  <p>And inside the component:</p>
  
  <pre><code>submitForm(e: MouseEvent) {
      e.preventDefault();
      this.auth.authentificate(this.cred).subscribe(() =&gt; {}, (err) =&gt; {
          console.log('ERROR component', err);
      });
  }
  </code></pre>
  
  <p>It works but I feel doing it wrong..
  I just transpose the way we did it with angular1 and <code>promises</code>, do you see better way to achieve it?</p>