title: Angular HTTP Observable @Input
body: <p>here is my pseudo code:</p>
  
  <p><strong>service</strong></p>
  
  <pre><code>getData(): Observable&lt;MyData[]&gt;{
    return this.http.get&lt;Data[]&gt;(`https://localhost/api/data`);
  }
  </code></pre>
  
  <p><strong>component:</strong></p>
  
  <pre><code>myData: Data[];
  [...]
  
  ngOnInit(){
   this.myService.getData.subscribe( data =&gt; {
     this.myData = data;
     console.log(data);
   });
  }
  
  </code></pre>
  
  <p><strong>Template:</strong></p>
  
  <pre><code>&lt;app-subComponent *ngIf="data" class="cat-row" [data]='{"type": "row", "data": myData}'&gt;&lt;/app-subComponent&gt; 
  </code></pre>
  
  <p><strong>SubComponent:</strong></p>
  
  <pre><code>@Input() data: any;
  
  ngOnInit(){
   console.log(data);
  }
  </code></pre>
  
  <p><strong>My Problem:</strong> In this scenario, console.log gives me an empty array. 
  If I don't pass this data attribute to my subcomponent via input, my first console.log gives me the correct array. </p>
  
  <p>So maybe i miss something if i want to use http, observable, templating and @input in one "row" ? </p>
  
  <p>Thanks for your help!</p>