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 >
< >
Nesta página do site você pode assistir ao vídeo on-line Data filtering in angular component duração hora minuto segundo em boa qualidade , que foi baixado pelo usuário kudvenkat 14 Maio 2018, compartilhe o link com seus amigos e conhecidos, no youtube este vídeo já foi visto 87,813 vezes e gostou 403 espectadores. Boa visualização!
