Handling DOM updates
Due to its declarative and reactive nature, RxJS provides a way to efficiently take care of DOM updates and react to UI updates without directly manipulating DOM elements.
How to do it…
In this example, we will build a small cooking recipe app, where we will load a list of recipes from the mocked BE (using MSW) and show them in the list. After that, we will implement two search fields to find desired recipes by name and ingredient. We will do this by handling input updates from both filters in a declarative way, then combining the query results and providing filtered results in the end.
Here’s how the app would look in its initial state:
Figure 1.1: Recipe app – initial state
Step 1 – Handling one search input
Let’s start easy by implementing search by name filter first. In our Angular component, we will have a searchNameInput DOM element reference and a fromEvent operator:
@ViewChild('searchNameInput...
