Support us .Net Basics C# SQL ASP.NET ADO.NET MVC Slides C# Programs Subscribe Buy DVD

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>

angular crud tutorial

No comments:

Post a Comment

If you like this website, please share with your friends on facebook and Google+ and recommend us on google using the g+1 button on the top right hand corner.