The Imperative Pattern for Filtering Data

Explore the concept of the imperative pattern to filter 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:

Get hands-on with 1200+ tech skills courses.