Angular Template: How to bind RXJS Observable and read its properties?
<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>