You are currently viewing Angular 9 and Spring Boot CRUD Tutorial – Feature 5 filter expenses by keyword

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.

<div class="row">
    <div class="col-md-4">
        <input type="text"
            [(ngModel)]="filters.keyword"
            name="keyword"
            (input)="listExpenses()" 
            class="form-control"
            placeholder="Filter expense"/>
    </div>
    <div class="col-md-4">
        <a class="btn btn-primary text-light" routerLink="/addexpense">Add Expense</a>
    </div>
</div>
<div>
    <div class="card mt-1" *ngFor="let expense of expenses">
        <a routerLink="/editexpense/{{expense.id}}" class="card-body flex">
            <span class="text-capitalize font-weight-bold">{{expense.expense}}</span>
            <span class="float-right mr-2 badge badge-pill badge-warning font-weight-bold amount">{{expense.amount | currency: 'INR'}}</span>
        </a>
        <div class="card-footer">
            <button class="btn btn-danger" (click)="deleteExpense(expense.id)" style="width: 10%;">Delete</button>
        </div>
    </div>
</div>

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

import { Component, OnInit } from '@angular/core';
import { Expense } from 'src/app/models/expense';
import { ExpenseService } from 'src/app/services/expense.service';


@Component({
  selector: 'app-list-expenses',
  templateUrl: './list-expenses.component.html',
  styleUrls: ['./list-expenses.component.css']
})
export class ListExpensesComponent implements OnInit {

  expenses: Expense[] = [];

  filters = {
    keyword: ''
  }

  constructor(private _expenseService: ExpenseService) { }

  ngOnInit(): void {
    this.listExpenses();
  }

  deleteExpense(id: number) {
    this._expenseService.deleteExpense(id).subscribe(
      data => {
        console.log('deleted response', data);
        this.listExpenses();
      }
    )
  }

  listExpenses() {
    this._expenseService.getExpenses().subscribe(
      data => this.expenses = this.filterExpenses(data)
    )
  }

  filterExpenses(expenses: Expense[]) {
    return expenses.filter((e) => {
      return e.expense.toLowerCase().includes(this.filters.keyword.toLowerCase());
    })
  }
}




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

 

Bushan Sirgur

Hey guys, I am Bushan Sirgur from Banglore, India. Currently, I am working as an Associate project in an IT company.

This Post Has 2 Comments

  1. Danish Yunus Shaikh

    Sir, will u please tell me where the login and logout part for the Angular 9 and Spring Boot CRUD Tutorial

  2. Abdel

    Hi,
    I went through 43 clips to develop employee directory using eclips 2 years back. I searched on them, i could not find them. I want review them again. Will you please advise with with clips link.
    Your cooperation in this regard is appreciated.
    Best regards,
    Abdel

Leave a Reply