asp.net core docker 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.

Text version of the video
http://csharp-video-tutorials.blogspo...

Slides
http://csharp-video-tutorials.blogspo...

Angular CRUD Tutorial
https://www.youtube.com/playlist?list...

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
https://www.youtube.com/c/KudvenkatAr...

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

asp.net core docker Data filtering in angular component
151 Likes	151 Dislikes
32,494 views views	524K followers
Science & Technology	Upload TimePublished on 14 May 2018

Related keywords

tutorialspoint,tutorials dojo,central park 5,asp.net core github,craigslist nj,asp.net core 3,server status,server jobs nyc,asp.net core swagger,credit karma,services group,tutorials by hugo,asp.net machine account,server error in '/' application,servers for minecraft,asp.net core dependency injection,services windows,asp.net core 3.0,tutorialspoint c#,services angular,calculator,tutorialspoint tableau,services google play apk,asp.net mvc tutorial,asp.net core 3 release date,server job description,tutorials by a,asp.net cos'è,servicenow,tutorialspoint python,services briefcase,asp.net core web api,craigslist ny,asp.net core 2. guida completa per lo sviluppatore,asp.net core,server pro,server status ffxiv,asp.net zero,cheap flights,server memes,asp.net core hosting,services sas,services online,chase,tutorialspoint java,serverless architecture,tutorialspoint java compiler,server resume,server books,tutorialspoint javascript,services technologies gps,college football,server jobs,cvs,cnn,costco hours,tutorialspoint sql,asp.net web api,server side rendering,tutorialspoint spring,serverless,tutorialspoint spark,asp.net core download,cool math games,services & training hse colombia sas,servicestack,citibank,asp.net core identity,asp.net core logging,tutorialsystems,asp.net guida,cunyfirst,services fms publish announcement,services.msc no abre,asp.net core razor pages,server duties,asp.net core environment variables,tutorials near me,http://asp.net,server 2019,chernobyl,century 21,serverminer,services consultores,services consulting,services.msc,asp.net core configuration,asp.net tutorial,asp.net mvc,asp.net core tutorial,asp.net core mvc,server hosting,chase online,costco,server jobs near me,capital one,server rack,tutorialspoint html,craigslist,tutorialsteacher,tutorialspoint reactjs,asp.net core 2.2,services desk,tutorialspoint python 3,services transmission company sas,asp.net core signalr,services manager,asp.net identity,tutorialspoint spring boot,asp.net core middleware,asp.net download,services tag dell,