Angular2 custom search filter not working

Question

Hi I'm trying to create a simple search filter that filters an array of employees and returns an array of employees whose names contain the letters typed in the search box. I have imported the filter pipe, and declared it under the provider. I don't get any errors but it also doesn't do anything.. any idea??

I have created the custom filter pipe in filter.pipe.ts:

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

@Pipe({
  name: 'filter',
  pure: false
})
export class FilterPipe implements PipeTransform {

  transform(employees: any, term: any): any {
    //check if search term is undefined
    if (term === undefined) return employees;
    //return updated employees array
    return employees.filter(function(employee){
      return employee.name.toLowerCase().includes(term.toLowerCase());
    })
  }

}

I the "term" variable in the search input in app.component.ts:

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

@Component({
  selector: 'app-root',
  templateUrl: `
  <div class="col-sm-12 col-md-12">
    Search By:
    <div class=navbar-form role="search">
      <div class="input-group">
        <input type="text" [(ngModel)]="term" class="form-control" placeholder="Last name, First name">
      <div class="input-group-btn">
        <button class="btn btn-default" type="submit"><span class="glyphicon glyphicon-search"></span></button>
      </div>
      </div>
      <div class="row" *ngIf="term">
        <h3>You searched for: {{term}}</h3>
      </div>
    </div>
  </div>
  <app-employee></app-employee>
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app works!';

}

and it is being filtered in my employee-list.component.ts:

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

import { IEmployee } from './shared/interface';
import { SharedService } from './shared/shared.service';
import { EMPLOYEES } from './mock-employees';
import { FilterPipe } from './filter.pipe';

// import {Observable, Subject} from '@reactivex/rxjs';

@Component({
  selector: 'app-employee',
  templateUrl: `
  <p>
    Emoloyee List:
  </p>
  <ul *ngFor = 'let employee of employees | filter:term'>
    <li>{{employee.name}}</li>
    <li>{{employee.city}}</li>
  </ul>
  `,
  styles: [],

})
export class EmployeeListComponent implements OnInit {

  employees: IEmployee[] = [
    {"name":"Sarah", "city": "Barcelona"},
    {"name": "Lauren", "city": "Milan"},
    {"name": "Jenny", "city": "Toronto"}
  ];

  constructor( private sharedService: SharedService ) { }

  ngOnInit(): void{

  }

}

and my app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import { EmployeeListComponent } from './employee-list.component';

import { SharedService } from './shared/shared.service';
import { FilterPipe } from './filter.pipe';

@NgModule({
  declarations: [
    AppComponent,
    EmployeeListComponent,
    FilterPipe
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule
  ],
  providers: [ SharedService, FilterPipe ],
  bootstrap: [AppComponent],


})
export class AppModule { }

the list is not being filtered at all. I don't understand why it's not working... Any help would be much appreciated! Thanks!

cyr_x · Accepted Answer · 2017-03-06 01:29:36Z

1

Sure it's not working, because term has never been defined inside EmployeeListComponent. Just add an Input to your EmployeeListComponent:

@Input('search-term')
public term: string = null;

And modify your app components HTML to pass in your search term:

 <app-employee [search-term]="term"></app-employee>

answered Mar 6, 2017 at 1:29

cyr_x

14.3k2 gold badges35 silver badges48 bronze badges

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

1 Comment

Kimmiekim Over a year ago

Thanks so much it worked! I had the two way data binding in [(ngModel)]= "term", so I thought that was sufficient enough to be called around components! Thanks so much.

Collectives™ on Stack Overflow

Angular2 custom search filter not working

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related