Angular property setter vs ngonchanges

Text version of the video http://csharp-video-tutorials.blogspo... 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   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   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