Angular 4 ngFor looping through array of objects with HTML

Question

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

<div class="list" *ngIf="listContacts == true">
 <mat-grid-list cols="3" rowHeight="2:1" *ngFor="let i of contacts">
  <mat-grid-tile>
    <div class="card">
      <img src={{contacts[i].image}} alt="picture">
      <h2>{{contacts[i].name}}</h2>
    </div>
  </mat-grid-tile>
 </mat-grid-list>
</div>

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.

export class AppComponent {
// array of contact objects
contacts = [
{
  name: "Robbie Peck",
  image: "src/assets/robbie.jpg",
}, 
{
  name: "Jenny Sweets",
  image: "src/assets/jenny.jpg",
}, 

...

]
}

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?

Should be i.name, i.image etc not contacts[i]. i is an object of type contact not and index — Ric
– Ric, Commented Mar 17, 2018 at 19:17

Sajeetharan · Accepted Answer · 2018-03-17 19:19:09Z

9

You don't have to pass the index, you can just use the variable i and access i.image and i.name

<mat-grid-list cols="3" rowHeight="2:1" *ngFor="let i of contacts" >
 <mat-grid-tile>
    <div class="card">
      <img src={{i.image}} alt="picture">
      <h2>{{i.name}}</h2>
    </div>
  </mat-grid-tile>

answered Mar 17, 2018 at 19:19

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular 4 ngFor looping through array of objects with HTML

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related