3.5 Component-Only Lifecycle Methods

Hi folks. In this lesson, we're going to take a quick look at the component-only lifecycle methods that we can make use of. Angular provides four lifecycle methods which can be used with both components and directives, and we looked at those in the last lesson. But it also provides another four lifecycle methods which can only be used with components. The first two methods are both to do with content projection. Remember that content projection is the process of passing content from one template into another component's template. The ngAfterContentInit lifecycle method is invoked once, directly after Angular has projected external content into the component's template. To use this lifecycle method, we need to import it into a component's class from Angular's core module. Angular will invoke this method for us once AfterContent has been projected into the component or if no content is projected. This lifecycle method is invoked a single time directly after the ngDoCheck method has been invoked for the first time. One point to note about importing and specifying AfterContentInit is that it is purely optional. Even if we don't import this or specify it in the implements list, the ngAfterContentInit method will still be invoked by Angular. Let's just change this file to this instead. So let's go back to the browser now, and let's just look at the console. And we still see the AfterContentInit message. We actually see it twice so we can see the angular has invoked the method twice. The reason why we see it twice is because the controls component has been injected into the application twice. There are two instances of it. We can still do a production build as well, even without the interface. The benefit of using the interface, however, is in our tooling. We can see in the editor that we already have a linked error there on the ngAfterContentInit method. The linked message basically tells us that we should be using the interface. And it's useful to use the interface to avoid possible incorrect uses of the method. So let's just put the file back to how it was with the interface in it. And we can see that the linked error goes away now. Nothing changes. So, if we go back to the browser. We can still see our two occurrences of that log message. But it is recommended to always use the interface for lifecycle methods. So let's see what happens if we try to pass an argument through this method. So we can see that we've got a new linked error now, this time on the controls component class itself. And it tells us that the component is incorrectly implementing the after content init interface, and that's because it doesn't actually accept any arguments. So that's another reason why we should use the interface. It just avoids methods being used incorrectly. Another lifecycle method that is four components only is after content check. This method is called directly after the AfterContentInit method, but it's the encode again every time the ngDoCheck method is called. So this method maybe invoke numerous times while a component is in use. The final two component-only lifecycle methods are both to do with views. And these methods follow a very similar path into the content methods that we've just looked at. There is an ngAfterViewInit lifecycle method that Angular will revoke one time only when the view and any child views have been created. This method is invoked after the first AfterContentChecked method. This method is invoked after the first AfterViewInit method, similarly the ngAfterViewChecked lifecycle method is similar to AfterViewInit, but it will be invoked every time the AfterContentChecked method is invoked. And so it maybe invoked multiple times during a component's lifecycle. Both of these methods can be used in the usual way by importing and adding the interface to the implement list of the class, and then adding the corresponding method to the class. So again, we're not gonna be using the ngAfterContentInit method. So let's put this component back to how it was at the start of the lesson. So in this lesson, we looked at some lifecycle methods that are only available when using components. We discussed the ngAfterContentInit, ngAfterContentChecked, ngAfterViewInit, and ngAfterViewChecked lifecycle methods. And we also covered why it is recommended to make use of the interface for these lifecycle methods when we choose to make use of them. Thanks for watching.