Data filtering in angular component
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.
Healthy diet is very important for both body and mind. We want to inspire you to cook and eat healthy. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking.
/ @aarvikitchen5572
Text version of the video
http://csharp-video-tutorials.blogspo...
Slides
http://csharp-video-tutorials.blogspo...
Angular CRUD Tutorial
• Angular CRUD tutorial
Angular CRUD Tutorial Text Articles & Slides
http://csharp-video-tutorials.blogspo...
All Dot Net and SQL Server Tutorials in English
https://www.youtube.com/user/kudvenka...
All Dot Net and SQL Server Tutorials in Arabic
/ kudvenkatarabic
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 >
< >
On this page of the site you can watch the video online Data filtering in angular component with a duration of hours minute second in good quality, which was uploaded by the user kudvenkat 14 May 2018, share the link with friends and acquaintances, this video has already been watched 87,813 times on youtube and it was liked by 403 viewers. Enjoy your viewing!
