CODEWITHSUNDEEP
angularangular-pipe
Rahul dev
Rahul dev

Reputation: 1307

filter list with dynamic value angular 2

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

Upvotes: 0

Views: 4985

Answers (2)

Himanshu T
Himanshu T

Reputation: 1

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);
  }

Upvotes: 0

Lucas Andrade
Lucas Andrade

Reputation: 4590

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.

Upvotes: 1

Related Questions