asp.net core docker Angular property setter vs ngonchanges

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

In our previous 2 videos we discussed 2 approaches (ngOnChanges and Property Setter) to detect and react to input property changes in Angular. In this video we will discuss the difference between these 2 approaches and when to use one over the other.

Both these approaches have their own use cases. Your software requirement determines which approach to choose. Let us understand this with an example.

Let us say your child component has 5 input properties. If any of the input properties change, then your requirement is to log those changes. This can be very easily achieved using ngOnChanges life cycle hook. The ngOnChanges life cycle hook is invoked when any of the input properties change.

Each input property that has changed will be attached to the SimpleChanges object using the property name as the key. So if you have 5 input properties, and if 3 out of those 5 properties change, then those 3 properties will be attached to the SimpleChanges object using the property name as the key.

So in short, with ngOnChanges you have access to all input property changes at one place.

The following code logs all the input property changes to the browser console.

ngOnChanges(changes: SimpleChanges) {
for (const propName of Object.keys(changes)) { const change = changes[propName]; const from = JSON.stringify(change.previousValue); const to = JSON.stringify(change.currentValue); console.log(propName + ' changed from ' + from + ' to ' + to);
}
}

To achieve this exact same thing (i.e logging if any of the 5 input properties change) with a property setter, is a bit tedious because you have to have that logging code in every property setter. So if you want to capture multiple property changes, I prefer ngOnChanges life cycle hook as we get all the changes instead of just the changes related to a single property. On the other hand, if you are interested in a single property, then I would use a property setter instead.

private _employeeId: number;

@Input()
set employeeId(val: number) {
console.log('employeeId changed from ' + JSON.stringify(this._employeeId) + ' to ' + JSON.stringify(val));
this._employeeId = val;
}
get employeeId(): number {
return this._employeeId;
}

private _employee: Employee;

@Input()
set employee(val: Employee) {
console.log('employee changed from ' + JSON.stringify(this._employee) + ' to ' + JSON.stringify(val));
this._employee = val;
}
get employee(): Employee {
return this._employee;
}

ngOnChanges
1. We get all the changes instead of just the changes related to a single property
2. Useful when multiple properties change

Property Setter
1. Property setter is specific to a given property, so we only get changes of that specific property
2. Useful when you want to keep track of a single property

asp.net core docker Angular property setter vs ngonchanges
102 Likes	102 Dislikes
15,912 views views	524K followers
Science & Technology	Upload TimePublished on 26 Mar 2018

Related keywords

wcf vs web api,ajax meaning,central park 5,asp.net core github,craigslist nj,wcf one piece,asp.net core 3,server status,ajax fc,ajax players,server jobs nyc,asp.net core swagger,credit karma,asp.net machine account,server error in '/' application,servers for minecraft,asp.net core dependency injection,asp.net core 3.0,wcf ria services,calculator,ajax ontario,asp.net mvc tutorial,asp.net core 3 release date,server job description,asp.net cos'è,asp.net core web api,ajax jquery,wccftech,craigslist ny,ajax call,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,chase,serverless architecture,server resume,wcf c#,server books,college football,ajax deadpool,server jobs,cvs,cnn,costco hours,asp.net web api,wcf service application,server side rendering,serverless,wcf soap,wcf cat,asp.net core download,cool math games,wcf test client,citibank,asp.net core identity,ajax parking,asp.net core logging,cunyfirst,ajax post,asp.net guida,wcf nba,wcfi foundation,ajax jersey,wcf authentication,asp.net core razor pages,server duties,asp.net core environment variables,http://asp.net,server 2019,chernobyl,century 21,serverminer,ajax cleaner,asp.net core configuration,ajax marvel,asp.net tutorial,asp.net mvc,asp.net core tutorial,wcfm,ajax roster,wcfs international curriculum,asp.net core mvc,ajax soccer,chase online,server hosting,wcf api,costco,wcfi,server jobs near me,ajax dish soap,capital one,server rack,craigslist,ajax tavern,ajax javascript,ajax request,wcf dragon ball,asp.net core 2.2,asp.net core signalr,ajax paving,ajax greek,asp.net identity,asp.net core middleware,wcf web service,asp.net download,wcf 2019 nba,wcf tutorial,