Exploring the classic pattern for fetching data
Let's start by exploring the classic pattern for collecting our data. In our scenario, the requested data is the list of recipes.
Defining the structure of your data
First and foremost, we need to define the structure of our data so that we can strongly type it.
We can use the Angular CLI to generate the Recipe model underneath the src/app/core/model
folder:
$ ng g i Recipe
For conventional purposes, we will change the name of the generated file from recipe.ts
to recipe.model.ts
. Then, we will populate the interface with the specific properties of Recipe
, as follows:
export interface Recipe { id: number; title: string; ingredients: string; tags?: string; imageUrl: string; cookingTime?: number; prepTime?: number; ...