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

6 Comments on "Data filtering in angular component"

Notify of
avatar

kodad kodad
Guest
kodad kodad
1 month 22 days ago

By

Ata ur Rehman
Guest
Ata ur Rehman
3 months 1 day 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
3 months 3 days 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
3 months 6 days 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
3 months 7 days ago

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

awais ahmad
Guest
awais ahmad
3 months 7 days ago

greate sir….

wpDiscuz