I thought I had a good grasp upon this directive but maybe I’m going about it the wrong way. I have a parent component that renders a child component and on that child component I have an ngFor directive that loops over my customers and creates a card for each instance. I keep getting this error though:
Here is my code:
Parent HTML (customer-section.component.html):
<app-customer-card *ngFor="let card of customerCards"></app-customer-card>
Parent TS (customer-section.component.ts):
import { Customer } from "./customer model/customer.model";
@Component({
selector: "app-customer-section",
templateUrl: "./customer-section.component.html",
styleUrls: ["./customer-section.component.css"]
})
export class CustomerSectionComponent implements OnInit {
customerCards: Customer[] = [
new Customer(
`Hardol Doe`,
`../../../../assets/images/tyler-nix-ZGa9d1a_4tA-unsplash.jpg`,
`Swearem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam scelerisque accumsan nisl, a mattis eros vestibulum et. Vestibulum placerat purus ut nibh aliquam fringilla.`,
`a human smiling`
),
new Customer(
`Jane Schmidt`,
`../../../../assets/images/marivi-pazos-cvpk5Y4ZWUs-unsplash.jpg`,
`Swearem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam scelerisque accumsan nisl, a mattis eros vestibulum et. Vestibulum placerat purus ut nibh aliquam fringilla.`,
`a human woman`
),
new Customer(
`John Smith`,
`../../../../assets/images/marius-ciocirlan-vMV6r4VRhJ8-unsplash.jpg`,
`Swearem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam scelerisque accumsan nisl, a mattis eros vestibulum et. Vestibulum placerat purus ut nibh aliquam fringilla.`,
`a man smiling`
)
];
constructor() {}
ngOnInit() {}
}
Child HTML (customer-card.component.html):
<div class="card-img-container">
<img
class="customer-card-img"
src="{{ card.image }}"
alt="{{ card.imageAlt }}"
/>
</div>
<div class="customer-card-title">
<h1>{{ card.name }}</h1>
</div>
<div class="customer-card-content">{{ card.content }}</div>
</div>
Child TS (customer-card.component.ts):
import { Customer } from "../customer model/customer.model";
@Component({
selector: "app-customer-card",
templateUrl: "./customer-card.component.html",
styleUrls: ["./customer-card.component.css"]
})
export class CustomerCardComponent implements OnInit {
constructor() {}
ngOnInit() {}
}
And here is my model TS (customer.model.ts):
import { CommonModule } from "@angular/common";
@NgModule({
declarations: [],
imports: [CommonModule]
})
export class Customer {
public name: string;
public image: string;
public content: string;
public imageAlt: string;
constructor(name: string, image: string, content: string, imageAlt: string) {
this.name = name;
this.image = image;
this.content = content;
this.imageAlt = imageAlt;
}
}
I’m sure there is something small I’m missing but I cannot figure it out for the life of me. Any and all help is greatly appreciated