Exploring the classic pattern for fetching data

Let’s first have a look at the implementation of the classic pattern for fetching 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. This will allow us to take advantage of TypeScript’s type-checking features and catch type errors early.

We can use the Angular CLI to generate the Recipe model underneath the src/app/ core/model folder:

$ ng g i Recipe

For convention 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;
yield: number;
steps?: string;
rating:number;
}

One by one, we enter the properties of the recipe we are going to use...