filter list with dynamic value angular 2

Question

I am create list with in angular 2 and want to filter data when I put value in input text but my code is not working.I use pipes to filter it.Please tell what I do wrong.

html

<input type="text" class="form-control" #listFilter/>
<ul *ngFor="let data of dataList|filter:{name:listFilter}">

filter-pipes

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

@Pipe({
  name: "filter",
  pure: false
})
export class ArrayFilterPipe implements PipeTransform {
  transform(items: Array<any>, conditions: {[field: string]: any}): Array<any> {
    return items.filter(item => {
      for (let field in conditions) {
        if (item[field] !== conditions[field]) {
          return false;
        }
      }
      return true;
    });
  }
}

Array list which filter by input text

[
    {
      id:1 ,
      name: "ABC",
    },{
      id:2 ,
      name: "XYZ",
    },{
      id:3 ,
      name: "AQW",
    },{
      id:4 ,
      name: "ASD",
    },{
      id:5 ,
      name: "BVC",
    }
  ];

I am using angular 2.0.0 currently

Provide a plunker or jsfiddle - then it's a lot easier to help you. — Per Hornshøj-Schierbeck
– Per Hornshøj-Schierbeck, Commented Nov 14, 2016 at 11:08

Lucas Andrade · Accepted Answer · 2017-03-09 02:10:57Z

Ok First of all never user Pipes to filter or order any array or others objects that you have. If you are from Brazil just watch this class:

https://www.youtube.com/watch?v=h1t_O_w0LOc&list=PLGxZ4Rq3BOBoSRcKWEdQACbUCNWLczg2G&index=49

This girl explain why you should never filter or order anything with pipes.

Ok now let's create the correct input with autocomplete and at the same time filter the user input value.

At this example user will search one book of our books array.

This is the component:

import { Component, OnInit } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { Observable } from 'rxjs/Rx';

@Component({
    selector: 'app-filter-examples',
    templateUrl: './filter-examples.component.html',
    styleUrls: ['./filter-examples.component.css']
})

export class FilterExamplesComponent implements OnInit {

    books: string[] = ['Angular JS', 'Angular 2', 'JavaScript', 'HTML 5 and CSS 3',
    'Java 1', 'Java 2', 'Java 3', 'php', 'Typescript', 'C', 'c++',
    'C#'];
    filtro: string = '';

    getBooks() {

        // if the input is empty search result will show 0 books. 
        //This is just to not show all books before user do any search
        if (this.filtro === '') {
            return null;
        }



        if (this.books.length === 0 || this.filtro === undefined) {
            return this.books;
        }

        // Here where we will do the search. First of all filtro(filter in portuguese)
        // will be compare to all elements in our books (all of then in lower case) 
        // and will return all the elements that match with the variable filtro
        return this.books.filter((v) => {
            if (v.toLowerCase().indexOf(this.filtro.toLowerCase()) >= 0) {
                return true;
            }
            return false;
        });
    }
}

Now this is our html file:

<html> 
  <body> 

    Search some Book <br>
    <input list="testAutocomplete" [(ngModel)]="filtro" >
      <datalist id="testAutocomplete">
        <option *ngFor="let book of books">
          {{ book }}
        </option>    
      </datalist>


    <h1> Search Result </h1>
    <ul>
      <li *ngFor="let book of getBooks()">
        {{ book }}
      </li>
    </ul>
 </body>
</html>

The best way to do a simple search with autocomplete in Angular 2 is using datalist tag and ngFor to list the options. It's really simple. And don't forget the ngModel as input attribute to use this value in our methods in component.

OBS: the method getBooks is only to display the result to user in a dynamic list.

For those of us who are not from Brazil, could you also share why we shouldn't use pipes? Thanks.
I did not explain because I did not understand why you shouldn't use pipes. I think it's something related with performance. @sabzeta

Jeff Woodard · Accepted Answer · 2017-10-17 19:48:04Z

0

Your filter-pipes is good, no changes needed there. Only look if "field" is getting correct value.

here is an example:

HTML:

<tr class="row" *ngFor="let pipline of piplines | datafilter:
 {Status:searchText}">

controller.ts

 filterResult(searchText):void
  {
    this.searchText= searchText;
    console.log("filterResult:" + this.searchText);
  }

edited Oct 17, 2017 at 19:48

Jeff Woodard

6478 silver badges15 bronze badges

answered Oct 17, 2017 at 18:57

Himanshu T

11 bronze badge

Collectives™ on Stack Overflow

filter list with dynamic value angular 2

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related