title: How to loop over object properties with ngFor in Angular
body: <p>this is post is about an interesting problem I found at work.</p>
  
  <p>If you don’t know it yet. I’m talking about Angular 2+</p>
  
  <p><strong>The problem</strong></p>
  
  <p>So you want to display the markup for a list, the values for this list come from the back end and for some reason instead of a good old array of objects you receive something like this.</p>
  
  <pre><code>    { 
    "car" : 
      { 
         "color" : "red",
         "model" : "2013"
      },
     "motorcycle": 
      { 
         "color" : "red",
         "model" : "2016"
      },
     "bicycle": 
      { 
         "color" : "red",
         "model" : "2011"
      }
  }
  </code></pre>
  
  <p>Then you try to use *ngFor but a wild error message appears:</p>
  
  <pre><code>Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.
  </code></pre>
  
  <p>You might fix it in the back end so you get an array of objects, but ain’t no body got time for that. Don’t you worry child, I’ve got us.</p>