Published on May 14, 2018 by kudvenkat

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.

Text version of the video


Angular CRUD Tutorial

Angular CRUD Tutorial Text Articles & Slides

All Dot Net and SQL Server Tutorials in English

All Dot Net and SQL Server Tutorials in Arabic

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>

Leave a Reply

5 Comments on "Data filtering in angular component"

Notify of

Ata ur Rehman
Ata ur Rehman
4 days 4 hours ago

sir do you have made video on .. angular data from api authorize user rights wise..
or any dynamic menu from sql by user rights in angular

amr ahmed
amr ahmed
6 days 3 hours ago

Thanks for your much ,
so how many lesson and when to will finish this tutorial ,
also which your are use for api such firebase or any developer ?
Thanks for your again 😀

Svein Sørmo
Svein Sørmo
9 days 17 hours ago

HI, good stuff, can U pls make an example with a can-deactivate guard (I've seen the previous U made) with a notification to the user where U'r NOT using JS alert, but a dialog of some kind. The user experience is not good enough with the JS alert. Thx in advance.

Basha S.M
Basha S.M
9 days 20 hours ago

Why not use ngchange on input instead of creating getters and setters

awais ahmad
awais ahmad
10 days 6 hours ago

greate sir….