title: Angular Template: How to bind RXJS Observable and read its properties?
body: <p>I have created this interface:</p>
  
  <pre><code>interface IGame {
      name: string;
      description: string;
  }
  </code></pre>
  
  <p>I'm using it as an Observable and passing it as <code>Input</code> to the <code>Component</code>:</p>
  
  <pre><code>@Input() public game: Observable&lt;IGame&gt;;
  </code></pre>
  
  <p>I can see its value printed using the JSON pipe:</p>
  
  <pre><code> &lt;h3&gt;{{game | json}}&lt;/h3&gt;
  </code></pre>
  
  <p>When binding to a specific property, nothing is displayed (just an empty string):</p>
  
  <pre><code> &lt;h3&gt;{{game.name}}&lt;/h3&gt;
   &lt;h3&gt;{{game.description}}&lt;/h3&gt;
  </code></pre>