3.3 Component Lifecycle Events

Hi folks, in this lesson we're going to wrap up the course by taking a look at the new lifecycle events that have been introduced for Angular Components. We don't have the option to use link or compile functions with components like we do with regular directives. But we can use these lifecycle events to hook into different parts of a components lifecycle. There are four different methods we can attach to our component, $onInit, $onChanges, $postLink, and $onDestroy. The Init event is called on each controller after all controllers for an element have been initialized. It may sound like this event would be the first event you'd receive, but it isn't. A Changes event is dispatched when the bindings for the component are initialized. We then see the Init event followed by the postLink event once the components element has been linked to a scope. The Destroy event would be the last event received and can be used to tidy up after a component. We shouldn't really do too much DOM manipulation in a component. That's usually the domain of regular directives. But if we do need to do something DOM related, the $postLink event is the one to use. Because the DOM will be complete by the time this event is dispatched. We can also add DOM event handlers here if we need to as well. Only event handlers bound to the Changes event will receive a parameter. The parameter received by event handlers attached to this event is an object which contains the new and old values for each property of the component. So let's take a look at how we can add event handlers for these events. At the moment in the controller for the component in components slash modal JS. We've got some methods attached to the modal followed by some loose event handlers for the show modal and hide modal events. Let's tidy this up slightly, and move the event binding into an event handler for the Init event which encapsulates the event binding code. I don't know about you, but I don't like having event handlers loose in the component controller like this. Because we have no control over when this code runs. So let's tidy things up slightly, and move this event binding into an event handler for the Init event in order to encapsulate the event binding code. Great, so now we don't have code that just runs whenever it happens to run. We have code that executes in a much more predictable manner, as the result of a concrete action. This makes it more easy to understand the flow of an application, and it also means it's much more testable. We can refactor the event handling code to improve it even more. There's a little redundancy in that in the event handlers, we're just calling a method on the component which in turn sets a simple scope property. Instead, we can just specify the show modal and hide modal methods as the event handlers and move the logic into these methods. We only want to update the event.target property if it doesn't already exist. So we just wrap our fake event object in an if statement that checks whether or not the event.target property is defined. And if not, it will go ahead and add our fake one. We've also got some code in the show modal event handler. And that code just checks whether or not there is a data argument. And if there is, whether the data.id property is the same as the modal id property. So we can also move that code into the show modal method. So now back in the event handling code we can get rid of the callbacks and just bind directly to the show or hide modal methods. The bindings now refer to the scope method, which is more succinct. And let's just run the app in the browser quickly just to make sure that everything's still working. Looks like we've got some console errors. Let's just take a quick look at these. And it looks like I forgot to include a data argument. Let's fix that quickly. So remember, all event handlers receive an event object first of all but it's the data object that we actually want. Let's go back to the browser now, And let's try that once again. So the save note modal was working, let's just check that the delete note modal was working as well. And we're all good. So in this lesson we saw how to bind to the events that are triggered by the component at different points during its lifecycle. We looked at the different types of events that we can bind to and looked at a couple of different examples of using them, including the $onInit and $onDestroy lifecycle events. Thanks for watching.