In this lecture, we are going to explore the other lifecycle hooks.
Before we begin, I don't recommend stressing over every hook.
It's likely you won't need every hook.
I'll be sure to point out the most common hooks in angular applications.
The constructor and nji on in it hook are some of the common hooks you may come across.
They're so common.
The Seelye adds these hooks to a generated component.
We will start with the energy on changes and energy do check hooks.
First, we should implement their interfaces.
We are continuing to work in the post class.
At the top of the file update, the import statement for the on changes and do check interfaces.
You may need to format the import statement it is starting to get long.
Next, let's implement these interfaces to the class.
We can add multiple interfaces to a class by separating them with a comma.
Lastly, let's define both functions.
The name of the functions is energy on changes and energy do check.
Inside both functions, let's log some messages.
Both functions have similar behavior, unlike the energy on in it life cycle hook.
These two functions will run multiple times for different reasons.
The energy on changes function will run whenever changes are made to the component.
For example, let's say we update the URL to the image.
This function will run whenever that happens.
In fact, it's guaranteed to run once in our component.
Keep in mind, the post image property is set to an empty string after the data has been passed down
from the parent component to the child component.
The post image property will be updated.
Therefore, Angular will run the engine on changes function.
Moving on to the next function, the Nji do check function runs after a change detection cycle has occurred.
We've talked about change detection before.
It's the system angular uses for synchronizing a components data with its template.
Angular is not picture perfect.
It's possible it may overlook an area in our app during change detection.
The purpose of the new dude check function is to perform updates that angular may miss.
Rarely will you need this function, but it is available whenever Angular fails to update your component
properly.
The nji dude check function can be useful for performing changes when Angular doesn't want to.
Let's test out both functions in the browser.
In the console, the energy on changes function runs once take special note of the order of the messages.
This function runs after the constructor function, but before the engine on init function, it makes
sense since the engine on changes function happens immediately after changes in our components.
The engine do check function runs twice as a reminder.
The change detection system in Angular will run twice to check for errors.
Therefore, we can expect this function to run twice.
It'll continue to run whenever change detection is triggered.
For example, I click on the image the engine do check function gets called.
Even though our component isn't changing, this function will still run.
There are few and more hooks we need to talk about before we get into them.
We need to distinguish between the view and content in a template.
And angular content is placed into two categories they can either be view or content, the view refers
to the content inside the template file, whereas the content refers to the projected content from the
parent component.
Angular process is both categories of content separately.
To better understand, let's check out the app template file.
Inside the post tags, we are inserting content into the component.
This process is called content projection, even though we're inserting this content into the components.
We don't have access to their properties from the post component.
For example, the post component has a property called post image inside the projected content.
We can't access this property if we were to write an expression for the post image property.
We would receive an error.
The post image property is inaccessible since we're in the app components, angular will process the
template in the app component before sending it to the post component.
That's important to understand.
The post component is not expected to process the content.
Expressions or bindings in our projected content will be processed from the parent component.
Next, the template is sent to the child component after it's been sent to the post component.
Angular will begin processing the expression and bindings in the post component.
These are two separate events.
The projected content is called content.
The content and the components template is called view.
With that information in mind, there are four lifecycle hooks, two for the content and another two
for The View.
Let's explore all of them.
Switch back to the post class.
Let's go to the top of the file.
We will need to import their interfaces there the following after content in it after content checked.
After a view it after view checked.
Next, let's apply these interfaces to the class.
Lastly, let's define the functions required by these interfaces, the names of the function reflect
the names of the interfaces they are prefixed with the letters G.
Inside each function, we will log message to identify them in the console.
In total, you should have defined four functions.
Be sure to pause the video so that you have what I have.
Let's go through these functions one by one.
The first function is called nji after content in it.
As you can probably tell by the name, this hook refers to the projected content from the parent component.
It runs after the content has been initialized.
The expressions and bindings have been processed at this point.
The projected content has been inserted into the child components.
The second function is called nji after content checked.
This function runs after the content has been checked for changes.
The third function is called N.G. after view in it.
This function runs when the components template has been initialize.
The last function is called nji after view checks.
This function runs when the components template has been checked.
The view in it and content and it functions run once they run before their check function counterparts.
It is the first time the content has been processed.
The content checked and view check functions can run multiple times.
They will be called whenever angular change detection system runs.
Let's refresh the page in the browser.
In the council, we will find four messages.
Notice how the content function runs before the view, the projected content functions will always run
first.
These hooks are not commonly used, but they are available if you need them.
There's one last hook we will discuss.
Switch back to the editor.
At the top of the post class file, we will update the import list one more time.
We will include an interface called on destroy.
Next, we will implement this interface.
Afterward, we will define the energy on destroy function in the class.
Lastly, we will log a message.
Neon Destroy Hook will run when the component is destroyed.
We can remove components from the page when we don't need them anymore.
If the components is being removed from the document, Angular will run this hook.
It'll give us the opportunity to remove functionality to prevent memory leaks.
Unfortunately, we won't have a chance to test this function.
We haven't learned how to destroy components yet.
That wraps up the lifecycle hooks for this lecture.
It's a lot of folks to work with.
Luckily, you won't need every single one of them at most.
You will probably use two or three hooks in a single component.
The most commonly used hooks are the constructor N'Jie on in its N'Jie on changes and energy on destroyer
hooks.
Before we move on, there's one last warning I want to give hooks that run multiple times can impact
the performance of your app if you need to use these hooks.
Make sure you're not performing an intensive action.
Otherwise, the performance of your app may suffer in the next lecture.
We will continue learning about components.