Topics
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
csharp-video-tutorials.blogspot.com/2018/05/data-filter-in-angular-component.html

Slides
csharp-video-tutorials.blogspot.com/2018/05/data-filter-in-angular-component-slides.html

Angular CRUD Tutorial

Angular CRUD Tutorial Text Articles & Slides
csharp-video-tutorials.blogspot.com/2017/12/angular-crud-tutorial.html

All Dot Net and SQL Server Tutorials in English
www.youtube.com/user/kudvenkat/playlists?view=1&sort=dd

All Dot Net and SQL Server Tutorials in Arabic
www.youtube.com/c/KudvenkatArabic/playlists

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>

Leave a Reply

5 Comments on "Data filtering in angular component"

Notify of
avatar

Ata ur Rehman
Guest
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
Guest
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
Guest
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
Guest
Basha S.M
9 days 20 hours ago

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

awais ahmad
Guest
awais ahmad
10 days 6 hours ago

greate sir….

wpDiscuz