Coding Challenge: Implement a Filter

Problem statement

You’ve been given an existing Angular web application that retrieves recipe data from a back-end API. The data is present in recipes.json file in Chapter06/recipes-book-api/db-json folder. The front-end Angular application is implemented inside the recipes-book-front folder. Your task is to enhance this application by implementing a filtering feature. The filtering functionality should allow users to search for recipes based on three criteria: recipe name, chef’s name, and taste.

You can follow the steps below to implement the feature in the application:

• Implement the filtering function in the src/app/recipes-list/recipes-list.component.ts file.

• Initialize the recipe form in the src/app/recipes-filter/recipes-filter.component.ts file.

• Implement the model of recipe class in the src/app/core/model/recipe.model.ts file.

Try it yourself