Using multiple fields on Filter Pipe | Angular 4

Question

I was wondering how would I use Pipe to filter a json object using multiple inputs fields, here's my code so far with only one field filtering by name:

TS

members = [
    {name:'Carl', country:"Brazil"},
    {name:'John', country:"United States"},
    {name:'Madhu', country:"India"}
  ]

PIPE.TS

  transform(members: any, term: any): any {
//check if search term is undefined
if (term === undefined) return members;

//return updated members array
return members.filter(function(member){
  return member.name.toLowerCase().includes(term.toLowerCase());
})
  }

HTML

<input type="text" [(ngModel)]="term" name="any"/>

          <li *ngFor="let member of members | filter:term">

              <h3>{{member.name}}</h3>
              <span>{{member.country}}</span>

          </li>

I want to add an extra input field where it will search for the country.

EDIT:

It worked with the following code:

TS COMPONENT

 fields: any  = { name: "", country: "" };
  filters: any = { name: "", country: "" };

  updateFilters(): void {
      this.filters = Object.assign({}, this.fields);
      console.log(this.filters);
  }

HTML

<input type="text" name="any" [(ngModel)] = "fields.name" (ngModelChange)="updateFilters()"/>
          <input type="text" name="anyy" [(ngModel)] = "fields.country" (ngModelChange)="updateFilters()"/>

<li *ngFor="let member of members | filter: filters">
            <div style="border-bottom: 1px solid; border-color:rgba(0,0,0,0.3);margin-bottom:15px">
              <h3>{{member.name}}</h3>
              <span>{{member.country}}</span>
            </div>
          </li>

PIPE.TS

  transform(members: any, filters: any): any {
    return members.filter(item => {
    return (item.name.toLowerCase().indexOf(filters.name.toLowerCase()) >= 0 && item.country.toLowerCase().indexOf(filters.country.toLowerCase()) >= 0);

    });
  }

Faly · Accepted Answer · 2017-09-28 11:13:42Z

4

You can pass an object instead of multiple fields:

<li *ngFor="let member of members | filter: filters">

In your component's class:

filters: any = { name: "ex", country: "a country" };

UPDATE:

<input type="text" [(ngModel)] = "fields.name" (ngModelChange)="updateFilters()"/>
<input type="text" [(ngModel)] = "fields.country" (ngModelChange)="updateFilters()"/>

In your component:

fields: any  = { name: "", country: "" };
filters: any = { name: "", country: "" };

updateFilters(): void {
    this.filters = Object.assign({}, this.fields);
}

edited Sep 28, 2017 at 11:13

answered Sep 28, 2017 at 10:03

Faly

13.4k2 gold badges21 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Gustavo Over a year ago

It didn't worked, I suppose the <input> should look like this? <input type="text" [(ngModel)]="filters.name" name="anyy"/> <input type="text" [(ngModel)]="filters.country" name="any"/>

Gustavo Over a year ago

I understood your answer, but how would I do it with multiple input fields?

Gustavo Over a year ago

There's no error, your code doesn't answer how I would use multiple fields.

Faly Over a year ago

Ok, try to make your pipe impure. Look at the updated answer

Gustavo Over a year ago

Didn't worked, shouldn't we change something on the transform function on PIPE.TS? Also, how the [(ngModel)] on the inputs should be like?

|

Collectives™ on Stack Overflow

Using multiple fields on Filter Pipe | Angular 4

1 Answer 1

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related