Building Awesome Web Apps with Angular 2 Lifecycle Hooks
This course has been updated! We now recommend you take the Angular 9 Fundamentals course.
Transcript from the "Lifecycle Hooks" Lesson
>> Lukas Ruebbelke: Okay, so create a class. Import you dependencies. Decorate you class, and then enhance. First, by adding methods and properties to your class. And then, also by injecting services into your constructor so that you can then delegate business logic back up. And the final piece repeat, that is once your component gets a sufficient size, then be aggressive about actually breaking that into a subcomponent.
[00:00:32] So that's where that comes in, it's create, import, decorate. You enhance it, so you start to build out your functionality, and you're like, okay, now I've reached a place of critical mass. I'm going to repeat the same process on a subcomponent and so you just continue to refactor.
[00:00:49] So one additional piece on components that are extremely important. And we've kind of touched on this, various points throughout the day, is lifecycle hooks. And so under the hood, there is a secret life of components. There's things that are happening that are just going to happen no matter what.
[00:01:11] So a component gets added to the stage, it's bindings get initialized, some property changes, etc. Angular's handling these events kind of behind the scenes. Well, with lifecycle hooks, we have the ability to hook into those lifecycle events and perform custom logic. For instance, one of the biggest ones is that your data is not always available in the constructor, thus we use ngOnInit.
>> Lukas Ruebbelke: As well as you'll notice that in my code I'm using interfaces. So this isn't required, but it is recommended to make your code self-documenting as well as it allows your IDE to catch additional problems. And let me see here. Yes, so for your lifecycle hooks, they're just implemented as essentially class methods on the component class.
[00:02:08] And so what we have here is this entire list of lifecycle hooks. But generally, if we were going to apply the 80/20 rule here, these are the two that get used the most. So you could definitely go down the rabbit hole, and there's cases for these other ones, not trying to marginalize their contributions by any means.
[00:02:34] But ngOnInit, well so this is called after the first ngOnChanges. So essentially your bindings have been initialized. And ngOnDestroy is called just before your directive or your component is destroyed. So really OnInit is when it's coming to life, and OnDestroy is when it's going to be taken from the DOM.
>> Lukas Ruebbelke: And so we've actually seen this quite a bit in our code already. But notice ItemsComponent is implementing the OnInit interface. And so now by contract, we are obligated to have an ngOnInit method on our component class. And from here, then we're doing some kind of initialization. And so this just gets called automatically.
[00:03:27] So that's the one thing about lifecycle hooks, is that they are implicitly called on every event. You don't have to actually explicitly call them.
>> Lukas Ruebbelke: I can't think of a reason, but it would be really weird if you ever had to call a lifecycle hook directly, so if you're ever this.ngOnInit.
[00:03:48] I don't know, maybe for testing I've done it on 1.x components, but within your actual application Angular implicitly calls these for you. Yes?
>> Speaker 2: So with typescript in your implements OnInit, was that just a comma delimited list of lifecycle hooks if you had on OnDestroy there?
>> Lukas Ruebbelke: Yep.
>> Speaker 2: It would follow that same syntax, ngOnDestroy?
>> Lukas Ruebbelke: Yep, and so the question is, if you wanted to implement yet another lifecycle interface, would that just be a comma delimited list? And that's correct. So it'd be OnInit, OnDestroy.