Angular 9 and Spring Boot CRUD Tutorial – Feature 5 filter expenses by keyword

Hey in the previous post, we discussed deleting an expense, in this post let’s look at how to filter the expenses by keyword, meaning the user will enter the characters inside the textbox and we will filter the expenses which contain the characters inside the expense name. So let’s begin…




We will cover the following topics in this post,

  • Filter the array using filter() method
  • Compare the characters using includes() method

Obviously the first step is to create a text box inside the list-expenses.component.html page.

Also notice we are using ngModel for two way data binding. and also we are wiring up the input event by calling the listExpenses() which we will define inside the list-expenses.component.ts file




That’s it, now if you run the application, you will see the text box inside the list expense page and you can filter the expenses based on the keyword.




You can find the Github repository here

You can find the step by step video series here

 

Leave a Reply

Your email address will not be published. Required fields are marked *