In this lecture, we're going to learn about lifecycle hooks throughout this section.
We've seen how we can interact with components.
Angular gives us the option of having refined control over the changes in our components through lifecycle
hooks.
They are functions that run during events and our components.
Specifically, they run when components are experiencing changes.
There are a lot of lifecycle hooks in angular.
Some are more common than others.
Let's start with these simpler hooks.
The first hook is the constructor function.
We will be working inside the post component class.
Inside this class.
Add the constructor function.
Technically, this is not a hook run by Angular.
Instead, it's a default hook in the JavaScript language.
It gets called during the initialization of our component.
It is the first function that will run whenever we use our component inside this function.
Let's log a message.
There's another hook for when our component is initialized.
It's called the N.G. on init function inside our class.
We will define this function like before we will log a message.
We can write the energy on an IT function in our component without a problem.
However, it's not considered good practice.
There is a better way to write this function.
We can implement an interface we learned about interfaces in the TypeScript section of this course.
They are blueprints for objects to help the compiler understand the properties and methods inside an
object.
Angular defines a set of interfaces for life cycle functions and a component.
There are two benefits to adding them to our component.
Let's look at what those are at the top.
We can update the angular core package to include an interface called on in it.
Previously, we learned how to apply interfaces on objects with curly brackets syntax.
We can apply interfaces to classes by adding the implements keyword after the class name, followed
by the name of the interface.
Let's implement the on init interface to the class.
After adding this class, we're going to get an error, the error we're receiving is the first benefit
of implementing an interface.
The error is telling us we haven't properly added the nji on init function to the class.
It might be confusing at first, but it's not.
Once we look at the error carefully, I've purposely misspelled the function.
The letter O is capitalized.
After updating the letter, the error on the class is gone.
Implementing an interface can help us catch mistakes like these.
Typos are a common problem in programming.
You may be thinking what if we misspelled the interface name in the import statement?
For example, I'll change the O from uppercase to lowercase.
After doing so, TypeScript will throw an error.
It's telling us this interface does not exist, therefore it's practically fail proof to misspell the
interface accidentally.
Alan, do this change?
One last thing to point out let's hover our mouse over the energy on init function.
The editor will give us a description of this function.
It's a great way to learn more about a function in case you forget what it does.
By implementing this interface, we can avoid typos and we are given a description of the function.
It's always considered good practice to implement an interface for lifecycle hooks.
In the resource section of this lecture, I provide a link to the Lifecycle Hooks documentation page.
This page will provide us with detailed information on the various lifecycle hooks in, angular on the
sidebar.
There is a link to a section called Lifecycle Event Sequence.
This part of the page will give us a list of available lifecycle hooks in Angular.
I recommend checking it out if you want more information about each hook.
Let's go back to the editor.
The energy on a function will run when the component is initialized with the data.
It's completely different from the constructor function.
The data will have changed from both functions.
To better understand, let's update our long statements to include the post image property.
What do you think will happen, do you think we will see the same values?
Let's find out.
Refresh the browser with the console opened.
The post image property will be empty in the constructor function.
However, the property will contain the URL to the image in the nji on init function.
Interesting, right?
During the constructor function, the data passed down from the parent to the child component hasn't
occurred yet.
Therefore, we won't have access to input data.
The nji on init function runs after binding has occurred.
If we need the data from the parent to be available when the component is initialized, we should use
the energy on init function just like the constructor function.
This hook runs once it's a great hook for making the changes to our component after the data has been
sent down.
Let's explore the other hooks in the next lecture.