why filtering is not working in angular when type to user input?

Question

import { Component,OnInit } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  implements OnInit{
  _userinput:string='';
  filteritems:any[];
  items:any[] = [
    {
      name: 'Test 1'
    },
    {
      name: 'Test 2'
    },
    {
      name: 'Test 1'
    },
    {
      name: 'Test 2'
    },
    {
      name: 'Test 1'
    },
    {
      name: 'Test 2'
    },
    {
      name: 'Test 1'
    },
    {
      name: 'Test 2'
    },
    {
      name: 'Test 1'
    },
    {
      name: 'Test 2'
    },
    {
      name: 'Test 1'
    },
    {
      name: 'Test 2'
    },
    {
      name: 'Test 1'
    },
    {
      name: 'Test 2'
    },
    {
      name: 'Test 1'
    },
    {
      name: 'Test 2'
    },
    {
      name: 'Test 1'
    },
    {
      name: 'Test 2'
    },
    {
      name: 'Test 1'
    },
    {
      name: 'Test 2'
    },
    {
      name: 'Test 1'
    },
    {
      name: 'Test 2'
    },
    {
      name: 'Test 1'
    },
    {
      name: 'Test 2'
    },
    {
      name: 'Test 1'
    },
    {
      name: 'Test 2'
    },
    {
      name: 'Test 1'
    },
    {
      name: 'Test 2'
    },
    {
      name: 'Test 1'
    },
    {
      name: 'Test 2'
    },
    {
      name: 'Test 1'
    },
    {
      name: 'Test 2'
    }

  ]
  name = 'Angular 6';


get userinput(){
   return this._userinput;
}

set userinput(val){
  console.log('val',val);
 this._userinput = val;
 this.filteritems = this.items.filter((item)=>{
   return item.name.indexOf(val)!=-1
 })

 console.log(this.filteritems);
}
ngOnInit(){
  this.filteritems = this.items;
}

}

could you please tell me why filtering is not working I have one input field I want to filter list when I typed on input field

here is my code https://stackblitz.com/edit/angular-9wbd1q?file=src%2Fapp%2Fapp.component.ts

can you please provide other or best way to filter this list currently I am doing 2 way binding so I think it is not a best way to implement filtering

Answer 1

Because it expects exact match - type the whole name, for ex. "Test 1" and it will provide filtered results.

You probably want to check if substring exists. Change this:

return item.name.indexOf(val)!=-1

To:

return item.name.includes(val)

Answer 2

The best way is you do is using a Filter pipe as follows,

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'filter'
})
export class FilterPipe implements PipeTransform {
 transform(items: any, term: any): any {
    if (term === undefined) return items;
   return items.filter(item => item.name.indexOf(term) !== -1);
    }
  }

DEMO STACKBLITZ

Answer 3

This will work slightly better no type casing required

import { Pipe, PipeTransform } from '@angular/core';

    @Pipe({
      name: 'filter'
    })
    export class FilterPipe implements PipeTransform {
     transform(items: any, term: any): any {
        if (term === undefined) return items;
       return items.filter(item => (item.name).toLowerCase().indexOf((term).toLowerCase()) !== -1);
        }

  }