Data filtering in angular component

Опубликовано: 14 Май 2018
на канале: kudvenkat

87,813

403

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 >
< >

На этой странице сайта вы можете посмотреть видео онлайн Data filtering in angular component длительностью часов минут секунд в хорошем качестве, которое загрузил пользователь kudvenkat 14 Май 2018, поделитесь ссылкой с друзьями и знакомыми, на youtube это видео уже посмотрели 87,813 раз и оно понравилось 403 зрителям. Приятного просмотра!

262