I am working with Angular 4 and I am attempting to iterate through an array of objects to present the data in Angular Material grid tiles. The code snippet from my HTML file (app.component.html) is as follows:
<div class="list" *ngIf="listContacts == true">
<mat-grid-list cols="3" rowHeight="2:1" *ngFor="let contact of contacts">
<mat-grid-tile>
<div class="card">
<img src="{{contact.image}}" alt="picture">
<h2>{{contact.name}}</h2>
</div>
</mat-grid-tile>
</mat-grid-list>
</div>
The 'contacts' variable is an array of objects in the app.component.ts file. Within this array, there are currently nine objects, but for simplicity's sake, I have only displayed 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",
},
...
]
}
Instead of rendering nine separate tiles, each containing unique information (iterating through 'contacts' with the 'contact' variable), only one tile is being displayed. Furthermore, the console is showing an error related to the 'contacts[i]' notation. What mistake have I made? How can I ensure that the grid displays 9 tiles, each with the respective 'name' and 'image' properties found in the 'contacts' object in the corresponding typescript (app.component.ts) file?