Reviewing our app’s components

An Angular application has a tree structure consisting of all the components we create. In the following diagram, you will find the component tree of our recipe app, which is important for understanding the anatomy of the application:

Figure 2.7 – Components overview

Let’s break down the components:

• AppComponent: The parent component of the app

  HeaderComponent: The component representing the header of the app that contains the user space, the menu, and the logo

• HomeComponent: The component representing the landing page that contains RecipeFilterComponent and RecipesListComponent:
  • RecipeFilterComponent: The component representing the filter zone that contains the criteria fields and the Clear All and Show Results buttons
  • RecipesListComponent: The component containing a list of recipes
• RecipesDetailsComponent: The component containing the details of one recipe
• RecipesCreationComponent: The component containing a form to create a recipe with all the required fields

You now have a better understanding of the components that will make up our app.