loading...
Cover image for How to filter the data with a common search bar at the top (Angular 8)

How to filter the data with a common search bar at the top (Angular 8)

sandeepbalachandran profile image Sandeep Balachandran Updated on ・2 min read

Angular Journey (5 Part Series)

1) Generate QR code with Share / Download Feature ( Angular 8) 2) How to filter the data with a common search bar at the top (Angular 8) 3) Angular 9 New Features (Finally IVY is here) 4) Angular 10 Now Available 5) How to loop through object properties with ngFor in angular

Hey there,

Alt text of image

Lets say we have common search bar at the top of our application . We need to filter the available data on the main component according to the keywords typed.

We can make use of

  • Array filter method
  • Component interaction (Child to Parent)

Let's see our Header component (header.html)

<input matInput type="text"  [(ngModel)]="searchword"(input)="searchThis()">

We use

  • ngModel for two way data binding
  • (input) logs the value whenever you change the value of the element.

Header Component (header.ts)


import { Component,Input, OnInit, Output,EventEmitter } from '@angular/core';
@Output() searchcriteria = new EventEmitter<String>();
searchThis() {
    this.searchcriteria.emit(this.searchword)
}

We create a new event emitter in order to emit the value from the header component to body component. searchThis function will trigger the event for every keypress in the search input field.

Let's see our parent component or body component

Parent component (html)

<app-header (searchcriteria)="searchThis($event)"></app-header>

We use event binding to pass the data from header to parent .

Parent Component (ts)

  newArray
  searchThis(data) {
    this.content = this.newArray
    console.log(data)
    if (data) {
      this.content = this.content.filter(function (ele, i, array) {
        let arrayelement = ele.name.toLowerCase()
        return arrayelement.includes(data)
      })
    }
    else {
      console.log(this.content)
    }
    console.log(this.content)
  }
}

newArray is the array contains the data for the component. We assign the data to another array content each time function calls and filter from that array. The filter function changes the existing original array.

The filtered array will be used when we call the function if we change the original array. We need fresh array with full data each time when the function calls.

Let me know how you can improve this.

Until next time,

alt text

Angular Journey (5 Part Series)

1) Generate QR code with Share / Download Feature ( Angular 8) 2) How to filter the data with a common search bar at the top (Angular 8) 3) Angular 9 New Features (Finally IVY is here) 4) Angular 10 Now Available 5) How to loop through object properties with ngFor in angular

Posted on by:

sandeepbalachandran profile

Sandeep Balachandran

@sandeepbalachandran

Very much interested in working with a space exploration team. Well I couldnt get anywhere with my "ET" love. interested in human body anatomy. Again not a doctor. Currently fullstack dev

Discussion

markdown guide
 

Sandeep; Nice design, the event model is tops. Check out my article on Angular Event component here... dev.to/jwp/the-angular-event-servi...