Blog

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.

Feature – 4Feature – 6

You can find the Github repository here

You can find the step by step video series here