3.4 Component and Directive Lifecycle Methods

Hi folks, in this lesson we're going to learn about the lifecycle methods that components and directives have in Angular. Angular provides a series of different hookes that we can use to react to key moments in a component's life cycle. Let's take a look. One of the most common lifecycle methods is ngOnInit. This lifecycle method is so common that the Angular CLI adds it to all components that we generate by default. We did take a brief look at this earlier in the course but let's just go over it again. So we can open up any of the components that we've created and see it. Let's just open the Controls Component class file. So we import OnInits from the Angular core module, and we specify there are component implements OnInits within the class. We then have to add a method called ngOnInit. In Angular we'll invoke this method once it has initialized the component. So we can use this method to do any setup that is required. Now all classes also have a constructor. And all components can make use of the ngOnInit method. So, what should we use each one of these things for? For components or directives specifically, we should use the constructor only for dependency injection. Any actual initialization work that needs to be carried out should happen on the ngOnInit method. Because the constructor will be invoked automatically when Angular news up the component class deep inside Angular somewhere, way before the page loads. We can't test any code inside the constructive area easily. The ngOnInit method on the other hand can be tested very easily. Because we can simply code the method ourselves from within the test. So it's more maintainable if we have a simple rule like always do initialization in the same place. So the ngOnInit method is invoked when the component is initialized. This means that any values parsed into the component has been set. And as I mentioned, the instructor will have already been called way before the ngOnInit is invoked. In terms of the order in which life cycle methods are invoked, ngOnInit may be the first or second life cycle method to be invoked. If we do pass data into the component, another life cycle method will be invoked first. The ng on-changes method. But if we don't pass any data into the component, like with the controls component at the moment, we aren't passing any data into the component here. And so the ngOnInit method will be the first to fire. When we are passing data into components, the ng on-changes method will be invoked first as it receives the initial data. And then the ngOnInit method will be called after this. The ng onChanges method may, however, may be called subsequent times whenever the data it is consuming changes. The ngOnInit method isn't passed any arguments. But the ngonChanges method does receive an object containing the old and new values for the data that changed. If we want to make use of the ngOnChanges method, we just need to import, it, implement it and add the method. So we import two new things here on changes, which is an interface and simple change that would be simple changes. Which is a class, both of these are imported from the Angular core module.. So now we can implement on-changes. We just do that by providing it after the OnInit, we don't need to specify implements twice. And now we need to actually specify the ngOnChanges method. So the ngOnChanges method will receive the changes, these will be of the type simple changes. Another lifecycle method is ngDoCheck, which we can use to detect changes that may be outside of Angular's control, like if we're using a third party library or something. As with the other life cycle methods, we can import the interface, add it to the implements list and add the method for it. This method will be called after ngOnChanges and after ngOnInit and this method doesn't receive any arguments. This method will be invoked every time the Angulars own change detection runs. So this method could both be invoked numerous times in a components lifecycle. The last general lifecycle method that is available for both components and directives is ngOnDestroy. We should use this method to tidy up after a component, and unsubscribe from observables or remove any event handlers in order to avoid memory leaks. This method is called just before Angular, destroys the component. And again this method doesn't receive any arguments. So we don't need to actually use any of these lifecycle methods in this components. So let's get rid of everything that we've added in this lesson, including the ngOnInit method, which the CLI added for us, but which we aren't going to use with this component. So throughout the course, we will be using some of these lifecycle methods and at that point we can looking to how they are used in a bit more depth. I just wanted to show you how they can actually be implemented and the order in which they are usually fired. We're not in a place yet, really, where we can make use of any of them. So, in this lesson, we've looked at the lifecycle methods the Angular will invoke for us if we define them at different point of the lifecycle of our component or directive. We haven't looked at any directives yet, we will come to those later in the course. We saw that there are four lifecycle methods that can be used with both components and directives ngOnChanges, ngOnInit, ngCoCheck and ngOnDestroy, which are invoked on a minimum in its respective order. Some of them, like ngOnChanges, or ngDoCheck, might be evoked numerous times, depending on how the component is interacted with. Thanks for watching.