Defining the autosave requirement

As described in the View 2 – The New Recipe interface section of Chapter 2, Walking through Our Application, the user can add a new recipe by clicking on the New Recipe menu item. This will display the following form to be filled out:

Figure 6.1 – The New Recipe form

The standalone component that’s responsible for displaying the New Recipe form is called RecipeCreationComponent and is available under recipes-book-front\src\app\recipe-creation.

Here, we want to implement the autosave behavior, which consists of storing the user’s changes in the form automatically. In this example, we will be storing the form changes in the backend so that the user can retrieve the last changes any time after a disconnection, a timeout, or other problems – this feature improves the user experience by preventing data loss.

Now that we understand the requirement, let’s look at the imperative...