Exploring the imperative pattern for the autosave feature

We used Angular Reactive forms to build the New Recipe creation form. As described in the Using RxJS in Angular and its advantages section of Chapter 1, Diving into the Reactive Paradigm, Reactive forms leverage RxJS by providing the valueChanges Observable to track the FormControl changes. This makes our implementation easier since we want to listen to the form’s value changes to perform a save on every change.

You can find the HTML code of the New Recipe creation form in the recipe-creation.component.html file template. Then, in recipe-creation.component.ts, we can define the form as follows:

export class RecipeCreationComponent implements OnInit {
  constructor(private formBuilder: FormBuilder) { }
  recipeForm = this.formBuilder.group<Recipe>({
    id: Math.floor(1000 + Math.random() * 9000),
    title: '',
    ingredients...