Data filter in angular component

Suggested Videos
Part 47 - Filter pipe in angular | Text | Slides
Part 48 - Angular pure pipe | Text | Slides
Part 49 - Angular impure pipe | Text | Slides

In this video we will discuss implementing the data filter logic in an Angular component so we have better control on when that code should and shouldn't execute.


list-employees.component.ts : The code is commented and self-explanatory

export class ListEmployeesComponent implements OnInit {

  employees: Employee[];

  // Use this property to stored filtered employees, so we do not

  // lose the original list and do not have to make a round trip

  // to the web server on every new search

  filteredEmployees: Employee[];

  private _searchTerm: string;

  // We are binding to this property in the view template, so this

  // getter is called when the binding needs to read the value

  get searchTerm(): string {

    return this._searchTerm;

  }

  // This setter is called everytime the value in the search text box changes

  set searchTerm(value: string) {

    this._searchTerm = value;

    this.filteredEmployees = this.filterEmployees(value);

  }

  constructor(private _employeeService: EmployeeService,

    private _router: Router,

    private _route: ActivatedRoute) { }

  ngOnInit() {

    this.employees = this._employeeService.getActiveEmployees();

    this.filteredEmployees = this.employees;

  }

  filterEmployees(searchString: string) {

    return this.employees.filter(employee =>

      employee.name.toLowerCase().indexOf(searchString.toLowerCase()) !== -1);

  }

}

list-employees.component.html : To display the filtered list of employees, in the view template bind to the filteredEmployees property instead of employees property.

<div *ngFor="let employee of filteredEmployees">

    <div (click)="onClick(employee.id)" class="pointerCursor">

        <app-display-employee [employee]="employee" #childComponent>

        </app-display-employee>

    </div>

</div>