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 the 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 command line interface (CLI) to generate the Recipe model underneath the src/app/core/model folder:

ng g i Recipe

For conventional purposes, we’ll change the name of the generated file from recipe.ts to recipe.model.ts. Then we’ll populate the interface with the specific properties of the Recipe, as follows: