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 >
< >
In questa pagina del sito puoi guardare il video online Data filtering in angular component della durata di ore minuti seconda in buona qualità , che l'utente ha caricato kudvenkat 14 maggio 2018, condividi il link con amici e conoscenti, su youtube questo video è già stato visto 87,813 volte e gli è piaciuto 403 spettatori. Buona visione!
