Customer filter pipe - Angular2

Question

In the below component view,

<h2>Topic listing</h2>

<form id="filter">
  <label>Filter topics by name:</label>
  <input type="text" [(ngModel)]="term">
</form>

<ul id="topic-listing">
  <li *ngFor="let topic of topics | filter: term">
    <div class="single-topic">
      <!-- Topic name -->
      <span [ngStyle]="{background: 'yellow'}">name - {{topic.name}}</span>
      <!-- Topic type -->
      <h3>{{topic.type}}</h3>
    </div>
  </li>
</ul>

Custom filter syntax is: let topic of topics | filter: term

where custom filter is:

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

@Pipe({
  name: 'filter'
})

export class FilterPipe implements PipeTransform {

  transform(topics: any, term: any): any {
    // check if search term is undefined
    if(term === undefined) return topics;
    return topics.filter(function(topic){ // javascript filter(function)
      // if below is false, then topic will be removed from topics array
      return topic.name.toLowerCase().includes(term.toLowerCase());
    })
  }

}

the component class maintains data for topics:

export class DirectoryComponent implements OnInit {
  topics = [
    {type:"Fiction", name:"Avatar"},
    {type:"NonFiction", name:"Titanic"},
    {type:"Tragedy", name:"MotherIndia"},
  ];
  constructor() { }

  ngOnInit() {
  }

}

Edit: Without form tag, code works fine.

  <label>Filter topics by name:</label>
  <input type="text" [(ngModel)]="term">

Why custom filter FilterPipe does not filter term provided in input element?

post your complete code with pipe name – Sajeetharan Nov 16 '17 at 08:09 — Sajeetharan, Nov 16 '17 at 08:09
@Sajeetharan Which code is missing? – overexchange Nov 16 '17 at 08:19 — overexchange, Nov 16 '17 at 08:19

Prithivi Raj · Accepted Answer · 2017-11-16T09:51:42.513

1

Add brackets to your filter condition

<ul id="topic-listing">
  <li *ngFor="let topic of (topics | filter: term)">
    <div class="single-topic">
      <!-- Topic name -->
      <span [ngStyle]="{background: 'yellow'}">name - {{topic.name}}</span>
      <!-- Topic type -->
      <h3>{{topic.type}}</h3>
    </div>
  </li>
</ul>

Check the TS file

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular 5';
  term : any = "avatar";
  topics = [
    {type:"Fiction", name:"Avatar"},
    {type:"NonFiction", name:"Titanic"},
    {type:"Tragedy", name:"MotherIndia"},
  ];
}

Remove the word function and change it to below code. refer the working version here

return topics.filter((topic)=>{ 
      return topic.name.toLowerCase().includes(term.toLowerCase());
    })

update - root cause of the issue

if you want to use NgModel inside the form tags, either the name attribute must be set or the form control must be defined as 'standalone' in ngModelOptions

edited Nov 16 '17 at 09:51

answered Nov 16 '17 at 08:35

Prithivi Raj

2,658
1
19
34

edited my answer. I am exactly don't know why it's not working with word function. – Prithivi Raj Nov 16 '17 at 08:46
Your StackBlitz example works with the `function` keyword also, so it must be something else that's different. – Kirk Larkin Nov 16 '17 at 08:47
@serpent5 With lambda expression it does not work for me – overexchange Nov 16 '17 at 08:47
That's what I expected. Closely compare what you have with @PrithiviRaj's example and see what the difference is. – Kirk Larkin Nov 16 '17 at 08:49
I also did one change in HTML. Please try this and let me know – Prithivi Raj Nov 16 '17 at 08:50
See my working version and compare as @serpent5 said – Prithivi Raj Nov 16 '17 at 08:51
Only your form is not placed in the working version. check that too. – Prithivi Raj Nov 16 '17 at 08:52
Your code is incomplete, where is the search option to search the `term` with an `ngModel`?`` – overexchange Nov 16 '17 at 08:53
I did not mention `term : any;` in component class – overexchange Nov 16 '17 at 09:07
Hard coding a value to `term` is not a right idea. `term:any;` – overexchange Nov 16 '17 at 09:11
change it to string then – Prithivi Raj Nov 16 '17 at 09:12
I changed that too in that link. it's working there. what you are trying to do? – Prithivi Raj Nov 16 '17 at 09:18
[Here](https://github.com/shamhub/Front-end-programming/tree/master/Angular-2/src) is my complete code – overexchange Nov 16 '17 at 09:26
remove the form tag if you are not using angular forms. after removing the form tag it's started working. I copied that code to my working version. check and let me know – Prithivi Raj Nov 16 '17 at 09:40
Yes, form tag is creating problem. Any reason for that? Now it is working without form tag. Please update the answer accordingly. – overexchange Nov 16 '17 at 09:44
if you use form tags, you will get the following error message in console "If ngModel is used within a form tag, either the name attribute must be set or the form control must be defined as 'standalone' in ngModelOptions." – Prithivi Raj Nov 16 '17 at 09:48

Customer filter pipe - Angular2

1 Answers1