The Imperative Pattern for Filtering Data

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 initial results. The HTML template of the filter component looks like this: