CODEWITHSUNDEEP
angularangular8ngfor
Daniel
Daniel

Reputation: 15453

Angular 8: Unable to iterate over my posts object

So I started working on what should have been a simple building lists with *ngFor.

This is the AppComponent class file:

import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent {
  posts = [
    {
      title: "Neat Tree",
      imageUrl: "assets/tree.jpeg",
      username: "nature",
      content: "I saw this neat tree today",
    },
    {
      title: "Snowy Mountain",
      imageUrl: "assets/mountain.jpeg",
      username: "mountainlover",
      content: "Here is a picture of a snowy mountain",
    },
    {
      title: "Mountain Biking",
      imageUrl: "assets/biking.jpeg",
      username: "biking1222",
      content: "I did some biking today",
    },
  ];
}

And then in app.component.html file I refactored it like so:

<app-card>
  *ngFor="let post of posts" [title]="post.title" [imageUrl]="post.imageUrl"
  [username]="post.username" [content]="post.content"
</app-card>

That should be it,I should be seeing my three different card components just as before, but instead I see one broken card component. No error in terminal, no error in console. I am stumped here.

Upvotes: 0

Views: 34

Answers (1)

BLSully
BLSully

Reputation: 5939

Your markup is wrong. Need to move the tag close to after the attributes

<app-card
  *ngFor="let post of posts" [title]="post.title" [imageUrl]="post.imageUrl"
  [username]="post.username" [content]="post.content">
</app-card>

Upvotes: 2

Related Questions