title: Reading a value from a map in a template (which is set via an observable)
body: <p>My service is returning a Map. Now I want to use one of the values in my template but it won't show and I don't understand why. </p>
  
  <p>I've created an example:</p>
  
  <p>1 value is set via the constructor which is shown, the other 2 via an observable. The first one ('myKey') is shown the other one isn't.</p>
  
  <pre><code>@Injectable()
  export class MessageService {
  
      loadTestData(): Observable&lt;Map&lt;string, string&gt;&gt; {
          const testData = new Map&lt;string, string&gt;();
          testData.set('mySecondKey', 'mySecondValue');
          testData.set('myThirdKey', 'myThirdValue');
  
          return Observable.of(testData);
      }
  }
  
  @Component({
    selector: 'my-app',
    template: `
      &lt;div&gt;
        &lt;h2&gt;Hello {{name}}&lt;/h2&gt;
        &lt;h3&gt;Shown: {{test.get('myKey')}}&lt;/h3&gt;
        &lt;h3&gt;Not shown: {{test.get('mySecondKey')}}&lt;/h3&gt;
        &lt;h3&gt;Map size: {{test.size}}&lt;/h3&gt;
      &lt;/div&gt;
    `,
  })
  export class App implements OnInit {
    name:string;
    test: Map&lt;string, string&gt; = new Map&lt;string, string&gt;();
  
    constructor(private messageService: MessageService) {
      this.name = `Angular! v${VERSION.full}`
      this.test.set('myKey', 'myValue');
    }
  
    ngOnInit() {
      this.messageService.loadTestData().subscribe(data =&gt; {
        this.test = data;
      });
  
    }
  }
  </code></pre>
  
  <p><a href="https://plnkr.co/edit/6mUieUMJTSvekiNxEuU3" rel="nofollow noreferrer">https://plnkr.co/edit/6mUieUMJTSvekiNxEuU3</a></p>