title: Angular 4 ngFor looping through array of objects with HTML
body: <p>I'm using Angular 4 and I want to loop through an array of objects and display the information in Angular Material grids tiles. My html (app.component.html) looks a bit like this</p>
  
  <pre><code>&lt;div class="list" *ngIf="listContacts == true"&gt;
   &lt;mat-grid-list cols="3" rowHeight="2:1" *ngFor="let i of contacts"&gt;
    &lt;mat-grid-tile&gt;
      &lt;div class="card"&gt;
        &lt;img src={{contacts[i].image}} alt="picture"&gt;
        &lt;h2&gt;{{contacts[i].name}}&lt;/h2&gt;
      &lt;/div&gt;
    &lt;/mat-grid-tile&gt;
   &lt;/mat-grid-list&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And contacts is an array of objects inside app.component.ts. There are NINE objects within contacts but for simplicity I've only put two here.</p>
  
  <pre><code>export class AppComponent {
  // array of contact objects
  contacts = [
  {
    name: "Robbie Peck",
    image: "src/assets/robbie.jpg",
  }, 
  {
    name: "Jenny Sweets",
    image: "src/assets/jenny.jpg",
  }, 
  
  ...
  
  ]
  }
  </code></pre>
  
  <p>So rather than have nine different 's appear, each with their own information (looping i through contacts), I only have one and the console shows an error where it doesn't recognize contacts[i]. What have I done wrong? How can I get the  to have 9 's, each with name and image i within the contacts object in the typescript (app.component.ts) file?</p>