How to apply filters to *ngFor?

Question

Apparently, Angular 2 will use pipes instead of filters as in Angular1 in conjunction with ng-for to filter results, although the implementation still seems to be vague, wit

Answer 1

The first step you create Filter using @Pipe in your component.ts file:

your.component.ts

import { Component, Pipe, PipeTransform, Injectable } from '@angular/core';
import { Person} from "yourPath";

@Pipe({
  name: 'searchfilter'
})
@Injectable()
export class SearchFilterPipe implements PipeTransform {
  transform(items: Person[], value: string): any[] {
    if (!items || !value) {
      return items;
    }
    console.log("your search token = "+value);
    return items.filter(e => e.firstName.toLowerCase().includes(value.toLocaleLowerCase()));
  }
}
@Component({
  ....
    persons;

    ngOnInit() {
         //inicial persons arrays
    }
})

And data structure of Person object:

person.ts

export class Person{
    constructor(
        public firstName: string,
        public lastName: string
    ) { }
}

In your view in html file:

your.component.html

    
    

      
        
        
      
      

        

          
First name
          
Last name
        
      
      

        

          
{{person.firstName}}
          
{{person.lastName}}