title: Angular 5: httpClient is not returning JSON
body: <p>I got a problem with understanding how <code>HttpClient</code> works</p>
  
  <p><strong>api.service.js</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>import {Injectable} from '@angular/core';
  import {environment} from '../../environments/environment';
  import {HttpClient} from '@angular/common/http';
  import {Task} from './task';
  import 'rxjs/add/operator/map';
  
  const API_URL = environment.apiUrl;
  
  interface JSONObject {
    _id: string;
    title: string;
    created_at: string;
    startTime: string;
    endTime: string;
    state: boolean;
    description: string;
  }
  
  @Injectable()
  export class ApiService {
    public tasks;
  
    constructor(private http: HttpClient) {
    }
  
    public getAllTasks() {
      return this.http
        .get&lt;JSONObject&gt;(API_URL + '/api/task').subscribe(
          data =&gt; {
            this.tasks = data;
            console.log(data); //Returning Array
          });
    }
  }
  </code></pre>
  
  <p><strong>task.component.ts</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>import {Component, OnInit} from '@angular/core';
  import {ApiService} from './api.service';
  import {Subscription} from 'rxjs/Subscription';
  
  @Component({
    selector: 'app-task',
    templateUrl: './task.component.html',
    styleUrls: ['./task.component.css'],
    providers: [ApiService]
  })
  export class TaskComponent implements OnInit {
  
    constructor(private apiService: ApiService) {
  
    }
  
    ngOnInit() {
      console.log(this.apiService.tasks); // &lt;&lt;&lt; Not Returning JSON :(
    }
  
    getAllTasks() {
      return this.apiService.getAllTasks();
    }
  }
  </code></pre>
  
  <p>I am new to Angular 5 and have to create a CRUD App for lesson but actually stuck in at this problem.</p>
  
  <p>How can I get the JSON Object in task.component.ts ?</p>