title: Angular 8 How to get value from observable in ngOnInit and how do they behave
body: <p><strong>Hello Community</strong>, 
  <br>
  i am trying to use the HttpClient Module to get some data from my api.
  <br>
  The api calls are defined in my service. I call them in Lifecyclehooks in my component but i struggle to understand the behavior of the returned observables and how i get the value of it in ngOnInit.</p>
  
  <p>I built a sample code which logs the returned data objects to understand their behavior. The service functions return the observable.</p>
  
  <p><br>
  <strong>This is what my sample code looks like:</strong></p>
  
  <p>My sample service:</p>
  
  <pre class="lang-ts prettyprint-override"><code>import { Injectable } from '@angular/core';
  import { HttpClient } from '@angular/common/http';
  import { ConfigService } from '../config/config.service';
  
  @Injectable( {
      providedIn: 'root'
  } )
  export class ExperimentalService {
      constructor(private http: HttpClient, private ConfigService: ConfigService) {}
  
      private _apiRootUrl: string = this.ConfigService.get('api_root_url');
      private _apiUser: string = this.ConfigService.get('api_user');
      private _apiPath: string = this.ConfigService.get('api_path');
  
      public getLights() {
          return this.http.get(
              `${this._apiRootUrl}/${this._apiUser}/${this._apiPath}` 
          );
      }
  }
  </code></pre>
  
  <p>My sample compenent:</p>
  
  <pre class="lang-ts prettyprint-override"><code>import { Component } from '@angular/core';
  import { ExperimentalService } from '../../services/experimental/experimental.service';
  
  
  @Component({
    selector: 'app-experimental',
    templateUrl: './experimental.component.html',
    styleUrls: ['./experimental.component.scss']
  })
  export class ExperimentalComponent {
    constructor(private ExperimentalService: ExperimentalService) { }
  
    private test1;
    private test2;
    private executed: boolean = false; 
  
    ngOnInit(): void {
      console.log("----- ngOnInit -----");
      this.ExperimentalService.getLights().subscribe(
        (data) =&gt; {
          this.test1 = data;
          console.log("Test: 1.1", this.test1); // --- 1.1 ---
        }
      );
      console.log("Test: 1.2", this.test1); // --- 1.2 ---
    }
  
    ngDoCheck(): void {
      console.log("----- ngDoCheck -----");
      if (this.executed === false) { // if: only to avoid endless loop
        this.ExperimentalService.getLights().subscribe(
          (data) =&gt; {
            this.test2 = data;
            console.log("Test: 2.1", this.test2); // --- 2.1 ---
          }
        );
        console.log("Test: 2.2", this.test2); // --- 2.2 ---
        console.log("Test: 1.3", this.test1); //to check if test1 is coming after ngOnInit
  
        if (this.test2) {
          this.executed = true;
        } 
      }
    }
  
  }
  </code></pre>
  
  <p>The console output:</p>
  
  <pre><code>----- ngOnInit -----
  Test: 1.2 undefined
  
  ----- ngDoCheck -----
  Test: 2.2 undefined
  Test: 1.3 undefined
  
  ----- ngDoCheck -----
  Test: 2.2 undefined
  Test: 1.3 undefined
  
  Test: 1.1 Object { 1: {…}, 2: {…}, 3: {…} }
  
  ----- ngDoCheck ----- 
  Test: 2.2 undefined 
  Test: 1.3 Object { 1: {…}, 2: {…}, 3: {…} }
  Test: 2.1 Object { 1: {…}, 2: {…}, 3: {…} }
  
  ----- ngDoCheck -----
  Test: 2.2 Object { 1: {…}, 2: {…}, 3: {…} }
  Test: 1.3 Object { 1: {…}, 2: {…}, 3: {…} }
  Test: 2.1 Object { 1: {…}, 2: {…}, 3: {…} }
  </code></pre>
  
  <p><br></p>
  
  <ol>
  <li><strong>Why does the .2 gets logged before .1 ?</strong></li>
  <li><strong>Why do the first cycles return undef?</strong> (My thougt: The Api takes to long to deliver the response?!)</li>
  <li><strong>How can i get the Value in ngOnInit?</strong> Is there a option to wait for the api response if my thougt of 2. is right?</li>
  </ol>
  
  <p><br>
  <strong>Thank you, for every help!</strong></p>