Defining the requirement

As described in the View 2 – The new recipe interface section of Chapter 3, A Walkthrough of the 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 7.1 – The New Recipe form

The component responsible for displaying the New Recipe form is called RecipeCreationComponent and is available under recipes-book-front\src\app\recipe-creation. We want to implement 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, but they can also be stored on the client side; it all depends on the context. This feature improves the user experience by preventing data loss.

Now that we understand the requirement, let's look in the next section at the imperative way to implement autosave.