Build Web Apps with Angular 2 Lifecycle Hooks

Transcript from the "Lifecycle Hooks" Lesson

[00:00:00]
>> [MUSIC]

[00:00:03]
>> Lukas Ruebbelke: I'll take this a step further and let's talk about lifecycle hooks. We have seen OnInit, this is generally the one that I use the most. This is an interface. You do not necessarily have to implement the interface, it's recommended that you do. You can just call NG OnInit without doing that but, again, you get additional IDE love when you do.

[00:00:38] And so you can see, for instance, you can see here that I've got this squiggly line under users. What does this say? So we just sit still. It's saying, hey, you haven't implemented this interface so it's really handy. So ngOnInit.
>> Lukas Ruebbelke: So go back and
>> Lukas Ruebbelke: And so now, when this component has initialized, you can hook into it and do something.

[00:01:28]
>> Speaker 2: Every instance of that component or is it?
>> Lukas Ruebbelke: So that's a good question, that is a good question. So what would happen if
>> Lukas Ruebbelke: What if I had two users on here? You know what?
>> Lukas Ruebbelke: [LAUGH]
>> Lukas Ruebbelke: So obviously I think the pro-tip here is don't put alert dialogues in your entry OnInit, but this is important.

[00:02:05] Especially if you need data that may or may not exist, then this is a really good place, well, the place to do that. Also recommend, I think somebody mentioned earlier, one of the lessons they learned is be careful about the logic that you put into your constructor, because it may depend on things that is not available yet and so this is where this goes.

[00:02:30] I have the list of.
>> Speaker 2: Specifically inputs, sticking an input on it's not available in the constructor.
>> Lukas Ruebbelke: Yeah.
>> [INAUDIBLE]
>> Lukas Ruebbelke: Yep. [COUGH] So again this is only available in TypeScript when data is not completely available in the constructor. NgOnInit is the one that I have generally used the most but ngOnDestroy also really, really, really helpful.

[00:03:01] And I think the other ones are fairly fine-grained but there are use cases for them but really NgOnInit and ngOnDestroy, are the big ones.
>> Speaker 2: ngOnInit being after ngOnChanges is pretty subtle.
>> Lukas Ruebbelke: Yes, and I haven't actually encountered a case where that was a problem yet. But it is interesting, cuz once we get into input, outputs there could be that window there where you're expecting something from the input and it hasn't happened yet.

[00:03:40] And so just be aware that OnChanges, and we haven't talked about input, output yet but when those fire, then you get this event. So when you base your parent component or you're actually broadcasting something up, you'll fire that lifecycle hub. So, yes?
>> Speaker 3: You said something interesting, something about the OnInIt.

[00:03:59]
>> Lukas Ruebbelke: Hold on, it's 1:35 and I finally have said something interesting.
>> Speaker 2: Mark it.
>> Lukas Ruebbelke: Yeah, boom, on the board 1:35 Lucas said something interesting.
>> Speaker 4: Man, you guys are hard, I forgot what I was gonna ask.
>> Lukas Ruebbelke: [LAUGH]
>> Speaker 2: Mission accomplished.
>> Speaker 4: It's something about when you need to import the OnInIt, if you've got data not yet to find in your class.

[00:04:25]
>> Lukas Ruebbelke: So occasionally, and I've seen this with input and output, that your component has been defined but it hasn't been fully initialized. So the page is rendering, and so let's say you have a couple of components, you've got this hierarchy, well, it has to pull data from the parent component and you're feeding it in.

[00:04:46] So by the time the constructor executes, that there's this puritive time where the constructor has actually executed but you do not have your basically your data that you need for potentially inputs. Or from your parent components, they're still arriving and so Angular will render your component structure like top down.

[00:05:10] And so, that's what I mean by, I need to, for instance, pull something from a service and it's kind of asynchronous or something like that. Don't do that in the constructor, you want to do that cuz I've seen where you have a data structure and a constructor and a service and [COUGH] within your constructor of your component, you're like, this data equals this service.data, and it's not ready.

[00:05:37] Or you're trying to pull it from an input, so you want to put that into OnInit, generally.
>> Speaker 4: So OnInit fires after all that stuff is ready?
>> Lukas Ruebbelke: Yep.
>> Speaker 4: Okay.
>> Lukas Ruebbelke: So after it's been initialized, that's, I believe, the most safe place to do that.
>> Speaker 4: Okay, okay, okay.

[00:05:53]
>> Lukas Ruebbelke: Another question. Does that make sense?
>> Speaker 4: It does, I just wasn't quite sure what you were saying. So now I am. I'll sign that too, if you want.
>> Lukas Ruebbelke: All right, now I'm getting written testimonials, this is amazing.
>> Speaker 5: Yeah. Yeah, I'm looking at the other components that are defined in the sample app, Simple App, whatever it is, and you're not importing OnInIt.

[00:06:13] You are using it.
>> Lukas Ruebbelke: It's broken.
>> Speaker 2: It's broken. Is it? Is it broken?
>> Lukas Ruebbelke: No.
>> Speaker 2: It probably wouldn't be running I don't think. Well, it'll run without importing OnInIt. Directives you don't need to input, I don't think. Try imports. Yeah, is this a- Yeah. Implementations. Okay, just put this word file away.

[00:06:36]
>> Lukas Ruebbelke: Yeah, so-
>> Speaker 2: The compiler should norm.
>> Lukas Ruebbelke: Yeah, right. So just pull up- [CROSSTALK] I think you're right, this is, I think, this is a case where I wrote this on Alpha 1 and I think they were being, you didn't have to and then I think they broke it out somewhere between Alpha 1 and 9.

[00:06:53] And I think it's still working but if I were doing this now, then I would make it a point. So since you pointed this out, I will go back and explicitly import these things in. There may be, hold on, let me just see, just to cover my bases.

[00:07:10] No, cuz sometimes I think it, yeah, I don't know. I would explicitly import this.
>> Speaker 5: Okay.
>> Lukas Ruebbelke: Now.
>> Speaker 5: So explicitly do it.
>> Lukas Ruebbelke: Yeah, I would explicitly do it even to the point of implementing the interface. So, this is base offer, so there is a margin of why I don't know why this works or it was working, I don't know why it's not anymore.

[00:07:32]
>> Speaker 5: Yeah, that's totally legit, I just wanted to make sure [LAUGH] what [INAUDIBLE].
>> Lukas Ruebbelke: So good call, Mike.
>> Speaker 5: Yeah.