Angular 2 subscription not working
<p>I'm having the following issue with Angular 2 at the moment.</p>

<p>My service is working correctly, I've added <code>console.log()</code> to my service to check that it's pulling through, which it is. My service looks like this:</p>

<pre><code>import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/from';
import 'rxjs/add/operator/map';

@Injectable()
export class Service {
  location: string;

  constructor(private http: Http) {}

  getCurrentLocation(): Observable&lt;string&gt; {
  return this.http.get('service-method-here')
   .map((result: Response) =&gt; result.json())
     .map((data: any) =&gt; {
       let location: string = '';
       if(data) {
         console.log(data.description);
         location = data.description;
       }
       return this.location;
      });
  }
}
</code></pre>

<p>Inside my component however, I'm calling the service like so. It is invoking my service as the <code>console.log()s</code> I had placed inside the method are being displayed in the console correctly. This is how I'm calling the service inside my component:</p>

<pre><code>import { Component, OnInit } from '@angular/core';
import { FORM_DIRECTIVES } from '@angular/common';
import { Component } from '...';
import { Service } from '...';

@Component({
  selector: 'selector',
  templateUrl: '...',
  styleUrls: ...,
  directives: [FORM_DIRECTIVES, Component]
})
  export class Component implements OnInit {
  public locationName: string;
  constructor(public service: Service) {

  }

  ngOnInit() {
    this.service.getCurrentLocation()
      .subscribe(data =&gt; {
              console.log(data);
              this.locationName = data
            },
            error =&gt; {
              console.log('error');
            });
}
</code></pre>

<p>The <code>console.log()</code> inside the component is returning <code>undefined</code>. The HTML on my page for completeness sake looks like so:</p>

<pre><code>&lt;h4&gt;{{locationName}}&lt;/h4&gt;
</code></pre>