Upon checking the console, an error message appeared stating that Recipe was not defined.
To resolve this issue, I made sure to include the necessary class definition in a separate file at the end of my code.
The import statement:
import { Recipe } from '../recipe.model';
The updated Recipe component:
export class RecipeListComponent implements OnInit {
recipes: Recipe[] = [
new Recipe('Test 1', 'Test Description', 'https://www.gimmesomeoven.com/wp-content/uploads/2014/03/Cajun-Jambalaya-Recipe-with-Andouille-Sausage-Shrimp-and-Chicken-3-1.jpg')
];
constructor() {}
ngOnInit() {
}
}
The class definition for Recipe:
export class Recipe {
public name: string;
public description: string;
public imagePath: string;
constructor(name: string, description: string, imagePath: string) {
this.name = name;
this.description = description;
this.imagePath = imagePath;
}
}