title: access key and value of object using *ngFor
body: <p>I am a bit confused about how to get the <code>key</code> and <code>value</code> of an object in angular2 while using <code>*ngFor</code> for iterating over the object. I know in angular 1.x there is a syntax like </p>
  
  <pre class="lang-html prettyprint-override"><code>ng-repeat="(key, value) in demo"
  </code></pre>
  
  <p>but I don't know how to do the same in angular2. I have tried something similar, without success:</p>
  
  <pre class="lang-html prettyprint-override"><code>    &lt;ul&gt;
        &lt;li *ngFor='#key of demo'&gt;{{key}}&lt;/li&gt;
      &lt;/ul&gt;
  
      demo = {
          'key1': [{'key11':'value11'}, {'key12':'value12'}],
          'key2': [{'key21':'value21'}, {'key22':'value22'}],
        }
  </code></pre>
  
  <p>Here is a plnkr with my attempt:
  <a href="http://plnkr.co/edit/mIj619FncOpfdwrR0KeG?p=preview" rel="noreferrer">http://plnkr.co/edit/mIj619FncOpfdwrR0KeG?p=preview</a></p>
  
  <p>How can I get <code>key1</code> and <code>key2</code> dynamically using <code>*ngFor</code>? After searching extensively, I found the idea of using pipes but I don't know how to go about it.
  Is there any inbuilt pipe for doing the same in angular2?</p>