title: How to extract a property from an observable using a pipe
body: <p>I'm trying to store an <code>OrderState</code> object in my ngrx store. The problem I have is extracting data from this to my UI. I just want to use the async pipe to get a child property from this observable object.</p>
  
  <p><strong>order.state.ts</strong></p>
  
  <pre><code>export interface OrderState {
      stage: number;
      postcode: string;
  }
  </code></pre>
  
  <p><strong>app.component.ts</strong></p>
  
  <pre><code>...
  export class AppComponent {
    counter: Observable&lt;number&gt;;
    readonly orderState$: Observable&lt;OrderState&gt;;
  
      constructor(
        private appStateStore: Store&lt;AppState&gt;,
        private counterActions: CounterActions,
  
        private orderStateStore: Store&lt;OrderState&gt;,
        private orderActions: OrderActions,
      ) {
  
      this.counter = appStateStore.select('counter');
      this.orderState$ = orderStateStore.select(store =&gt; store);
      }
  ...
  </code></pre>
  
  <p><strong>app.component.html</strong></p>
  
  <pre><code>&lt;div&gt;Stage: {{ (orderState$ | async)?.stage }}&lt;/div&gt;
  </code></pre>
  
  <p>What is the syntax needed to get the <code>stage</code> property from my <code>orderstate</code> object.</p>
  
  <p>If I display <code>{{ orderState$ }}</code> I just get <code>[Object object]</code> displayed on the page.</p>
  
  <p>I'm guessing maybe I'm not selecting properly from my store?</p>
  
  <hr>
  
  <p>Update: I must be missing something basic here. I've now done this to try and work out what is happening...</p>
  
  <p><em>app.component.ts</em></p>
  
  <pre><code>stage: number
  
  ...
  
      this.orderStateStore.select(s =&gt; s).subscribe((data:OrderState) =&gt; {
        this.stage = data.stage;
        console.log(this.stage);
      });
  </code></pre>
  
  <p><em>app.component.html</em></p>
  
  <pre><code>&lt;div&gt;Stage: {{ stage }}&lt;/div&gt;
  </code></pre>
  
  <p>I can see in the console my that stage reports as undefined. I believe this is connected to the problem. For some reason I cannot set the <code>stage</code> of my component from inside this arrow function.</p>
  
  <hr>
  
  <p>Update: This behaviour seems very strange...</p>
  
  <p><em>order.state.ts</em></p>
  
  <pre><code>export interface OrderState {
      stage: number;
      postcode: string;
  }
  </code></pre>
  
  <p><em>app.component.ts</em></p>
  
  <pre><code>...
  this.orderStateStore.select(s =&gt; s).subscribe((data:OrderState) =&gt; {      
    console.log('--- START ---');
    console.log(data);
    console.log('Stage: ' + data.stage);
    console.log('--- END ---');
  });
  ...
  </code></pre>
  
  <p>Now here is what I get in the console...</p>
  
  <p><a href="https://i.stack.imgur.com/jzxU6.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jzxU6.png" alt="enter image description here"></a></p>
  
  <p>As you can see, <code>data</code> is not actually of type <code>OrderState</code>. It is the wrapper type around <code>OrderState</code> called <code>AppState</code>. Fine, so I modify my code to log <code>data.orderState.stage</code> to get the value <code>1</code>. However, when I do this TypeScript complains that <code>orderState</code> is not a property of data - which it clearly is looking at the console output!</p>