Support us .Net Basics C# SQL ASP.NET Aarvi MVC Slides C# Programs Subscribe Download

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 => !== -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(" class="pointerCursor">
        <app-display-employee [employee]="employee" #childComponent>

angular crud tutorial

No comments:

Post a Comment

It would be great if you can help share these free resources