Search⌘ K
AI Features

The Imperative Pattern for Filtering Data

Understand how to implement data filtering with an imperative approach in Angular by managing reactive forms and subscriptions. Explore the process of updating recipe lists based on user input, its workflow, and why this method falls short in fully leveraging reactive programming.

Let’s look at the classic, or imperative, way of filtering data, which is not recommended. The first thing that comes to mind is defining an OnClick callback to execute when the “See Results” button is clicked and calling a method that will replace the displayed recipes with those that match the filled criteria. Then the UI will be updated automatically, thanks to the Angular change detection mechanism.

A look at the filter component

We generated a new component, RecipesFilterComponent, under src/app/recipes-filter. It’s responsible for displaying the different filters to refine the ...