Angular property setter vs ngonchanges

this is part 36 of Angela krodha tutorial in this video well discuss the difference between NGO run changes and property setter and when to use one or the other in our previous two videos we discussed there are two approaches to detect and react when an input property value changes we can either use as your own genius lifecycle hook or a property setter in this video well discuss the difference between the two and when we use one or the other both these approaches have their own use cases your software requirement determines which approach to use let's understand this with an example at the moment our list page displays one employee at a time and it is this display employee component which is responsible for displaying these employee details this display employee component is the child component which is nested inside the parent component list employees component and this child component has got one input property employee with a setter and the getter inside the setter we have some code which logs any changes to this employee property to the browser console we don't need this login code anymore so I'm going to delete that now let's add another input property to this child component let's name it employee ID this is going to be of type number since this is an input property let's decorate it with ADD input decorator now let me deviate a bit and quickly show you something if we take a look at this Explorer vendor notice the file name display employee component is in red color that's because we have a linting error in this file reported by our linting tool ts length notice we have a trailing white space and because of that lending error the respective file is shown in red color to get rid of this red color we have to fix this lending error we can simply delete this white space by selecting it or we can right click on the document and select this option from the context menu for my document or we can use the keyboard shortcut alt shift F this is going to fix most of the lending if not all and once we have the linting error fix now if we take a look at the file explorer notice the file name is no longer in red color at the moment our child component has got two input properties employee ID and employee and here is our requirement when any of the input properties change we want to log those changes to the browser console and we can very easily achieve this using ng on gingers lifecycle hug because this lifecycle hook is automatically invoked when any of the input properties change so let's step into this lifecycle hook so this ng on changes method is automatically called whenever any of these two input properties change each input property that has changed will be attached to this simple changes object using the property name as the key for example if our employee input property changes then the changes will be in a key attitude to this changes object called employee along the same lines if our employee ID input property changes then this changes object will have a key called employee ID and that key will have the changes to that input property so now we can loop over those keys using a for loop like this so this Keys method right here returns the keys that are attached to this simple changes object now let's lock those keys to the browser console and see what we have got now take a look at the console tab in the browser developer tools notice the key employees log to the console and every time we click this button that same key is logged when we click this button the employee input property is changed and when that happens this ng on changes life cycle hook method is called and the property name is attached to this changes object as a key and we are logging that to the browser console so every time we click the button the key employees log to the console now you might be wondering then why is this input property employee ID not logged to the console that's because when we click this button that property is not changed and that's the reason it's not logged to the console so let's go ahead and bind to this employee ID input property as well we do that within our parent component which is list employee component so within the view template just like how we are binding to the employee input property let's also bind it to employee ID input property let's bind it to the ID property on this employee to display object notice now both the keys are logged to the console we can use these keys to get access to the corresponding input property changes and lock them to the console let's quickly do that now back in our child component within our ng ingenious life cycle hook instead of logging the property name to the console I'm going to create a constant here let's call it change and that equals our changes object and we know this changes object is going to have this key with a the employee ID or employee which we have in this constant problem so using this key we are getting access to the corresponding input property next I'm going to create another constant let's name it from and I'm going to use JSON dot stringify and then to this let's pass this constant change and this is going to have the property previous value which gives us access to the value of this input property before the change is actually made and I'm going to create another constant let's name this too and again we use Jason dot stringify and we get the current value finally let's log how the property has changed to the browser console notice now the input probably changes our log to the console as expected notice employee ID has changed from undefined to one and employee input property also changed from undefined to this employee object since this is the first time these two input properties are changing they're changing from undefined to something else so every time we click this button notice the two input properties change accordingly now let's hard-code the employee ID to a value of one right here instead of binding to the ID property on employee to display object and see what actually happens notice now on the initial page load both the properties employee ID and employee are changing from undefined to something else now when I click this view next employee button look what happens only the employee property has changed but not the employee ID why is that that's because we have hard-coded the employee ID input property value to one so when we click this view next employee button we are changing the employee to display object but not the value for this input property employee ID so the important point to keep in mind is only those input properties that have changed will be attaching to this simple changes object so for example if you have got five input properties within your child component and out of those five input properties if only three input properties have changed those three input properties will be attached to this simple changes object now if we have to achieve this exact same thing using a property setter it's a bit tedious because we have to have this login code in every property setter at the moment we have two input properties so we have to have the similar login code in both the input properties now imagine if you have like ten properties we have to repeat the same kind of login code in all those ten input property setters let's quickly do the same thing using property setters first let's delete the implementation of ng on changes and let's also stop implementing on Changes interface next let's include a getter and a setter for this employee-id input property first let's include a private backing field now we need to include a setter finally a getter now all that is left to do is log the property changes to the browser console we do that within the setter of the corresponding property so first let's log the changes to the employee ID property so let's Lock this hard-coded string employee ID changed from so to get access to the previous value they using the private backing field employee ID and let's also use JSON dot stringify to stringify the value let's do the same thing for our employee input property as well so I'm going to make a copy of this and then change the bits that are required so within the setter of our employee input property let's paste this and then change we're required so the property name is employee change it firm to get access to the current value we use underscore employee private backing field and to get the current value we use the Val property let's save our changes and then take a look at the browser notice both the property changes are logged to the console as expected when we click this button notice only the employee property is logged but not the employee ID property that's because employee the property value at the moment is hard-coded so let's again bind to the ID property of this employee to display object now every time we click this button both the properties change and those changes are locked to the console as expected so with anjing is life cycle hook we get all the changes instead of just the changes related to a single input property this is very useful when dealing with multiple input properties property setter on the other hand is specific to a given property so we only get ten years of that specific property useful when you want to keep track of a single input property or when you want to take different actions when different input properties change at the moment on our list page we are displaying one employee at a time we did this to understand a property setters and endian changes lifecycle hook now let's undo those changes so we have our list back first within our list employee component view template we don't need all this HTML let's delete that and let's uncomment this HTML next within the list employees component class we don't need these two properties right here we don't need this line within our ng on in its lifecycle hook and we don't need this next employee method as well finally in display employee component class we don't need these two types simple changes and own changes and we also don't need these two input properties here so let's delete both of them and then let's include employee property without a getter and a setter this is an input property so let's decorate it with at input decorator let's save all our changes and then take a quick look at the browser notice we don't have any errors on the console tab and on our list route we have our list of employees that's it in this video thank you for watching and have a great day

Channel: kudvenkat

Views: 26,144

Keywords: angular 5 ngonchanges vs property setter, angular 2 ngonchanges vs property setter, angular 4 ngonchanges vs property setter

Id: BYwfrSlJFfY

Length: 13min 16sec (796 seconds)

Published: Mon Mar 26 2018