search input field in angular?

Question

Here I have folderObjs array and Console of this array is in below code, I put search input field and I want to make search for this array by folderName and folderSize in angular how it is possible?

HTML

<mat-form-field>
 <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Search">
</mat-form-field>

<div *ngFor="let folder of folderObjs">
  <span>{{folder.folderName}}</span>
  <span>{{folder.folderSize}}</span>
</div>

TS

folderObjs : Folder[] = [];

applyFilter(filterValue) {
  console.log(this.folderObjs);
// 0: {folderid: 781, folderName: "pelu folder",folderActivity: "true", …}
   1: {folderid: 782, folderName: "biju folder", folderActivity: "true", …}
   filter: "d"
   length: 2

  this.folderObjs.filter = filterValue.trim().toLowerCase();
}

How you are going to take FolderSize input from user? Didn't see above. — Sameer, Dec 14 '18 at 05:56
Possible duplicate of [Javascript: How to filter object array based on attributes?](https://stackoverflow.com/questions/2722159/javascript-how-to-filter-object-array-based-on-attributes) — Alexander Staroselsky, Dec 14 '18 at 06:07

score 11 · Accepted Answer · answered Dec 14 '18 at 06:34

Create custom pipe

filter.pipe.ts

import { Pipe, PipeTransform } from '@angular/core';  
@Pipe({
  name: 'filter'
})
export class FilterPipe implements PipeTransform {
  transform(value: any, searchValue): any {
    if (!searchValue) return value;
    return value.filter((v) => 
    v.name.toLowerCase().indexOf(searchValue.toLowerCase()) > -1 || 
    v.size.toLowerCase().indexOf(searchValue.toLowerCase()) > -1)

  }

}

component.ts

<input type="search"  [(ngModel)]="search">

<div *ngFor="let f of (folderObjs | filter:search)as folder">
  {{f.name}}
  {{f.size}}    
</div>

<div *ngIf="(folderObjs | filter:search).length <1">
  Not Found
  </div>

Example:https://stackblitz.com/edit/angular-mrgzw3

The pipe 'filter' could not be found i got this type error in html — Dharmesh, Dec 14 '18 at 06:55
You need to include the filter pipe in app.module declaration array — Chellappan வ, Dec 14 '18 at 06:57

score 1 · Answer 2 · answered Dec 14 '18 at 06:05

1

const folderObjs = [
    {name: "Jane", lastName: "Doe"},
    {name: "john", lastName: "Snow"},
    {name: "Tyrion", lastName: "Lannister"},
    {name: "Lorem", lastName: "Ipsum"},
]

applyFilter(filterValue) {
 folderObjs.filter((val) => {
    return val.name.toLowerCase().indexOf(filterValue) > -1;
 });
}

above code will filter the data based name property.

applyFilter(filterValue, filterBy) {
 folderObjs.filter((val) => {
    return val[filterBy].toLowerCase().indexOf(filterValue) > -1;
 });
}

Can pass filterBy Option as well, Hope this helps

answered Dec 14 '18 at 06:05

Akshay Rajput

1,978
1
12
22

I got filtered array but how to hide other arrays – Dharmesh Dec 14 '18 at 06:33
1

@Ankit if you want to do it in a clean way, create a filter pipe from my code, apply the pipe in front of
the pipe will return the filtered element and the dom will update the list accordingly, if you need help creating a filter pipe, i will help you
– Akshay Rajput Dec 14 '18 at 06:45

score 1 · Answer 3 · answered Dec 14 '18 at 06:12

1

Ideally you can use either pipes or filter() to achieve this.

sortedArray : Folder[] = [];  

applyFilter(val: string) {

  this.sortedArray = this.folderObjs.filter(x =>
    x.folderName.toLowerCase().indexOf(val.trim().toLowerCase()) !== -1 || 
    x.folderSize.toLowerCase().indexOf(val.trim().toLowerCase()) !== -1)
}

answered Dec 14 '18 at 06:12

Ethan

29
1

I get searched value but how to hide other folder – Dharmesh Dec 14 '18 at 06:23
Use the sortedArray in your *ngFor so you can hide other folders – Ethan Dec 14 '18 at 06:36

score 1 · Answer 4 · answered Dec 14 '18 at 06:13

This will work, first take a copy of the folderObjs to folderObjCopy since when search value is empty we must repopulate all the values.

applyFilter(filterValue) {
 let val = filterValue.toLowerCase();
 let searchColumns = ['folderName','folderSize'];
 if (val.length > 0) {
 this.folderObjs = this.folderObjCopy.filter(function (d) {
          let matchFound = false;
          for (let data of search_columns) {
            let value = "" + d[data];
            if (value.toLowerCase().indexOf(val) !== -1 || !val) {
              matchFound = true;
              break;
            }
          }
          return matchFound;
        });
 } else {
        this.folderObjs = this.folderObjCopy;
   }
 }

Note : There will be much more optimised solutions, this is just my implementations. Please let me know if this doesn't work

search input field in angular?

4 Answers4

Linked