title: Data from @Input different in function than in template
body: <p>I have a container that passes an Observable called <code>positions$</code> to a component, which ultimately returns an array of objects. When I bind that array to the template, it displays the data as I would expect, but if I try to access that same data in one of my functions within that same component, it comes back with following:</p>
  
  <p><a href="https://i.stack.imgur.com/m9yeS.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/m9yeS.png" alt="enter image description here"></a></p>
  
  <p>That is logged to the console long after the expected data has displayed in the template, so I know I'm not clicking the button too quickly. Why aren't I getting the same data in both places? Here is my relevant code:</p>
  
  <p><strong>container typescript:</strong></p>
  
  <pre><code>positions$: Observable&lt;Position[]&gt;;
  ...
  this.positions$ = this.store.pipe(select(fromStore.getAllPositions));
  this.store.pipe(select(fromStore.getPositionsLoaded)).subscribe(loaded =&gt; {
    if (!loaded) {
      this.store.dispatch(new fromStore.LoadPositions());
    }
  });
  </code></pre>
  
  <p><strong>container html:</strong></p>
  
  <pre><code>&lt;app-position-form
    [loading]="loading"
    [positions]="positions$"
    [positionsLoading]="positionsLoading$"
    (add)="addPosition($event)"&gt;
  &lt;/app-position-form&gt;
  </code></pre>
  
  <p><strong>component typescript:</strong></p>
  
  <pre><code>@Input() positions: Position[];
  ...
  addPosition() {
      // Does NOT work as expected
      console.log('existing positions', this.positions);
  }
  </code></pre>
  
  <p><strong>component html:</strong></p>
  
  <pre><code>&lt;!-- Data displays correctly --&gt;
  &lt;ul *ngIf="(positions | async)?.length"&gt;
    &lt;li *ngFor="let position of (positions | async)"&gt;
      {{position.position}}
    &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>