<p dir="auto"><strong>I'm submitting a ...</strong></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="[ ] bug report
[x] feature request
[ ] support request"><pre class="notranslate"><code class="notranslate">[ ] bug report
[x] feature request
[ ] support request
</code></pre></div>
<p dir="auto"><strong>Current behavior</strong><br>
The ngFor directive iterates over each value of iterable objects, akin to the <a href="https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Statements/for...of" rel="nofollow">"for...of" statement</a>.</p>
<p dir="auto">If one wants to iterate over the enumerable properties of an object, an array of those properties needs to be created first and passed to ngFor.</p>
<p dir="auto"><strong>Expected behavior</strong><br>
Being able to use ngFor in a similar manner to the <a href="https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Statements/for...in" rel="nofollow">"for...in" statement</a>:</p>
<p dir="auto">Model:</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="this.things = {
  hello: 42,
  world: true
};"><pre class="notranslate"><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">things</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span>
  <span class="pl-c1">hello</span>: <span class="pl-c1">42</span><span class="pl-kos">,</span>
  <span class="pl-c1">world</span>: <span class="pl-c1">true</span>
<span class="pl-kos">}</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">Template:</p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;div *ngFor=&quot;let name in things&quot;&gt; {{ name }} &lt;/div&gt;"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">*ngFor</span>="<span class="pl-s">let name in things</span>"<span class="pl-kos">&gt;</span> {{ name }} <span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span></pre></div>
<p dir="auto">Output:</p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;div&gt; hello &lt;/div&gt;
&lt;div&gt; world &lt;/div&gt;"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span> hello <span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span> world <span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span></pre></div>
<p dir="auto"><strong>Minimal reproduction <del>of the problem</del> with instructions</strong><br>
<a href="https://gist.github.com/jsayol/3d6ec856880b8c510c7220d840715d12#file-ng_for_in-final-ts">I have a sample implementation over here</a>.</p>
<p dir="auto">This would ideally be part of the NgFor class itself rather than extending it, but this is just a demo. Proper thought would need to go into an actual implementation to make sure all edge cases are covered.</p>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong><br>
While it is currently possible to achieve the desired behavior, it involves several extra steps like using the directive linked above, implementing a similar behavior as a pipe, or manually extracting and storing the enumerable properties in the model.</p>
<p dir="auto">Having this as part of the framework would greatly simplify its usage when needed.</p>
<p dir="auto"><strong>Please tell us about your environment:</strong></p>
<ul dir="auto">
<li>
<p dir="auto"><strong>Angular version:</strong> 2.X, 4.0.X</p>
</li>
<li>
<p dir="auto"><strong>Browser:</strong> all</p>
</li>
<li>
<p dir="auto"><strong>Language:</strong> all</p>
</li>
</ul>
<p dir="auto">I am trying to iterate over  <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map" rel="nofollow">Map</a> values with the built in <code class="notranslate">ng-for</code>, but I can see that for some reason it is not working.</p>
<p dir="auto">In the specs, you can iterate over a Map iterable with:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="let map = new Map();
let values = map.values();
for (let item of values) {
    console.log(item);
}"><pre class="notranslate"><span class="pl-k">let</span> <span class="pl-s1">map</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-v">Map</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-k">let</span> <span class="pl-s1">values</span> <span class="pl-c1">=</span> <span class="pl-s1">map</span><span class="pl-kos">.</span><span class="pl-en">values</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-k">for</span> <span class="pl-kos">(</span><span class="pl-k">let</span> <span class="pl-s1">item</span> <span class="pl-k">of</span> <span class="pl-s1">values</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s1">item</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span></pre></div>
<p dir="auto">And none of the ES5 standard <code class="notranslate">for (...)</code>/<code class="notranslate">for (... in ...)</code> will work with that.</p>
<p dir="auto">Does the built in <code class="notranslate">ng-for</code> actually support iterating over maps?</p>