1
00:00:00,330 --> 00:00:04,650
In this lecture, we are going to explore the other lifecycle hooks.

2
00:00:04,890 --> 00:00:08,940
Before we begin, I don't recommend stressing over every hook.

3
00:00:09,240 --> 00:00:11,550
It's likely you won't need every hook.

4
00:00:11,880 --> 00:00:16,350
I'll be sure to point out the most common hooks in angular applications.

5
00:00:16,680 --> 00:00:22,260
The constructor and nji on in it hook are some of the common hooks you may come across.

6
00:00:22,620 --> 00:00:23,580
They're so common.

7
00:00:23,800 --> 00:00:27,210
The Seelye adds these hooks to a generated component.

8
00:00:27,660 --> 00:00:33,180
We will start with the energy on changes and energy do check hooks.

9
00:00:33,450 --> 00:00:36,270
First, we should implement their interfaces.

10
00:00:36,480 --> 00:00:39,450
We are continuing to work in the post class.

11
00:00:41,920 --> 00:00:48,760
At the top of the file update, the import statement for the on changes and do check interfaces.

12
00:00:51,230 --> 00:00:55,460
You may need to format the import statement it is starting to get long.

13
00:00:55,790 --> 00:00:59,420
Next, let's implement these interfaces to the class.

14
00:00:59,720 --> 00:01:04,690
We can add multiple interfaces to a class by separating them with a comma.

15
00:01:07,180 --> 00:01:09,940
Lastly, let's define both functions.

16
00:01:10,210 --> 00:01:15,880
The name of the functions is energy on changes and energy do check.

17
00:01:18,350 --> 00:01:21,710
Inside both functions, let's log some messages.

18
00:01:26,720 --> 00:01:32,510
Both functions have similar behavior, unlike the energy on in it life cycle hook.

19
00:01:32,750 --> 00:01:36,740
These two functions will run multiple times for different reasons.

20
00:01:37,070 --> 00:01:42,350
The energy on changes function will run whenever changes are made to the component.

21
00:01:42,740 --> 00:01:46,520
For example, let's say we update the URL to the image.

22
00:01:46,820 --> 00:01:49,490
This function will run whenever that happens.

23
00:01:49,820 --> 00:01:53,600
In fact, it's guaranteed to run once in our component.

24
00:01:53,900 --> 00:02:01,070
Keep in mind, the post image property is set to an empty string after the data has been passed down

25
00:02:01,070 --> 00:02:03,920
from the parent component to the child component.

26
00:02:04,160 --> 00:02:06,920
The post image property will be updated.

27
00:02:07,250 --> 00:02:11,780
Therefore, Angular will run the engine on changes function.

28
00:02:12,350 --> 00:02:19,850
Moving on to the next function, the Nji do check function runs after a change detection cycle has occurred.

29
00:02:20,210 --> 00:02:22,940
We've talked about change detection before.

30
00:02:23,270 --> 00:02:28,820
It's the system angular uses for synchronizing a components data with its template.

31
00:02:29,210 --> 00:02:31,280
Angular is not picture perfect.

32
00:02:31,580 --> 00:02:36,500
It's possible it may overlook an area in our app during change detection.

33
00:02:37,130 --> 00:02:42,920
The purpose of the new dude check function is to perform updates that angular may miss.

34
00:02:43,280 --> 00:02:49,610
Rarely will you need this function, but it is available whenever Angular fails to update your component

35
00:02:49,610 --> 00:02:50,330
properly.

36
00:02:50,690 --> 00:02:57,050
The nji dude check function can be useful for performing changes when Angular doesn't want to.

37
00:02:57,440 --> 00:03:00,170
Let's test out both functions in the browser.

38
00:03:02,750 --> 00:03:10,310
In the console, the energy on changes function runs once take special note of the order of the messages.

39
00:03:10,610 --> 00:03:17,360
This function runs after the constructor function, but before the engine on init function, it makes

40
00:03:17,360 --> 00:03:23,870
sense since the engine on changes function happens immediately after changes in our components.

41
00:03:24,440 --> 00:03:28,760
The engine do check function runs twice as a reminder.

42
00:03:28,910 --> 00:03:33,980
The change detection system in Angular will run twice to check for errors.

43
00:03:34,310 --> 00:03:37,820
Therefore, we can expect this function to run twice.

44
00:03:38,150 --> 00:03:41,750
It'll continue to run whenever change detection is triggered.

45
00:03:42,110 --> 00:03:47,570
For example, I click on the image the engine do check function gets called.

46
00:03:47,930 --> 00:03:52,100
Even though our component isn't changing, this function will still run.

47
00:03:52,730 --> 00:03:57,140
There are few and more hooks we need to talk about before we get into them.

48
00:03:57,290 --> 00:04:01,730
We need to distinguish between the view and content in a template.

49
00:04:04,270 --> 00:04:12,460
And angular content is placed into two categories they can either be view or content, the view refers

50
00:04:12,460 --> 00:04:19,269
to the content inside the template file, whereas the content refers to the projected content from the

51
00:04:19,269 --> 00:04:20,380
parent component.

52
00:04:20,800 --> 00:04:24,610
Angular process is both categories of content separately.

53
00:04:24,910 --> 00:04:28,630
To better understand, let's check out the app template file.

54
00:04:31,520 --> 00:04:36,320
Inside the post tags, we are inserting content into the component.

55
00:04:36,650 --> 00:04:43,180
This process is called content projection, even though we're inserting this content into the components.

56
00:04:43,450 --> 00:04:47,030
We don't have access to their properties from the post component.

57
00:04:47,570 --> 00:04:54,770
For example, the post component has a property called post image inside the projected content.

58
00:04:54,890 --> 00:05:00,920
We can't access this property if we were to write an expression for the post image property.

59
00:05:01,010 --> 00:05:02,660
We would receive an error.

60
00:05:05,250 --> 00:05:11,940
The post image property is inaccessible since we're in the app components, angular will process the

61
00:05:11,940 --> 00:05:16,260
template in the app component before sending it to the post component.

62
00:05:16,560 --> 00:05:18,390
That's important to understand.

63
00:05:18,900 --> 00:05:22,710
The post component is not expected to process the content.

64
00:05:22,980 --> 00:05:28,770
Expressions or bindings in our projected content will be processed from the parent component.

65
00:05:29,100 --> 00:05:35,610
Next, the template is sent to the child component after it's been sent to the post component.

66
00:05:35,880 --> 00:05:40,830
Angular will begin processing the expression and bindings in the post component.

67
00:05:41,160 --> 00:05:43,050
These are two separate events.

68
00:05:43,410 --> 00:05:46,260
The projected content is called content.

69
00:05:46,590 --> 00:05:50,130
The content and the components template is called view.

70
00:05:50,700 --> 00:05:57,390
With that information in mind, there are four lifecycle hooks, two for the content and another two

71
00:05:57,390 --> 00:05:58,260
for The View.

72
00:05:58,500 --> 00:05:59,940
Let's explore all of them.

73
00:06:00,210 --> 00:06:02,310
Switch back to the post class.

74
00:06:02,490 --> 00:06:04,560
Let's go to the top of the file.

75
00:06:04,740 --> 00:06:12,540
We will need to import their interfaces there the following after content in it after content checked.

76
00:06:12,810 --> 00:06:15,840
After a view it after view checked.

77
00:06:18,320 --> 00:06:21,770
Next, let's apply these interfaces to the class.

78
00:06:24,200 --> 00:06:30,800
Lastly, let's define the functions required by these interfaces, the names of the function reflect

79
00:06:30,800 --> 00:06:35,450
the names of the interfaces they are prefixed with the letters G.

80
00:06:43,590 --> 00:06:48,480
Inside each function, we will log message to identify them in the console.

81
00:06:54,930 --> 00:06:58,140
In total, you should have defined four functions.

82
00:06:58,380 --> 00:07:01,830
Be sure to pause the video so that you have what I have.

83
00:07:02,130 --> 00:07:04,830
Let's go through these functions one by one.

84
00:07:05,430 --> 00:07:09,480
The first function is called nji after content in it.

85
00:07:09,840 --> 00:07:16,650
As you can probably tell by the name, this hook refers to the projected content from the parent component.

86
00:07:16,950 --> 00:07:20,160
It runs after the content has been initialized.

87
00:07:20,490 --> 00:07:25,050
The expressions and bindings have been processed at this point.

88
00:07:25,290 --> 00:07:29,640
The projected content has been inserted into the child components.

89
00:07:30,180 --> 00:07:34,140
The second function is called nji after content checked.

90
00:07:34,560 --> 00:07:38,580
This function runs after the content has been checked for changes.

91
00:07:39,150 --> 00:07:42,720
The third function is called N.G. after view in it.

92
00:07:43,110 --> 00:07:47,190
This function runs when the components template has been initialize.

93
00:07:47,730 --> 00:07:51,390
The last function is called nji after view checks.

94
00:07:51,810 --> 00:07:55,410
This function runs when the components template has been checked.

95
00:07:56,040 --> 00:08:03,540
The view in it and content and it functions run once they run before their check function counterparts.

96
00:08:03,810 --> 00:08:06,900
It is the first time the content has been processed.

97
00:08:07,200 --> 00:08:12,570
The content checked and view check functions can run multiple times.

98
00:08:12,930 --> 00:08:17,460
They will be called whenever angular change detection system runs.

99
00:08:17,760 --> 00:08:20,100
Let's refresh the page in the browser.

100
00:08:22,770 --> 00:08:25,890
In the council, we will find four messages.

101
00:08:26,280 --> 00:08:33,299
Notice how the content function runs before the view, the projected content functions will always run

102
00:08:33,299 --> 00:08:33,870
first.

103
00:08:34,260 --> 00:08:38,730
These hooks are not commonly used, but they are available if you need them.

104
00:08:39,299 --> 00:08:41,610
There's one last hook we will discuss.

105
00:08:41,850 --> 00:08:43,500
Switch back to the editor.

106
00:08:45,980 --> 00:08:51,740
At the top of the post class file, we will update the import list one more time.

107
00:08:52,100 --> 00:08:55,370
We will include an interface called on destroy.

108
00:08:57,890 --> 00:09:00,560
Next, we will implement this interface.

109
00:09:03,090 --> 00:09:08,000
Afterward, we will define the energy on destroy function in the class.

110
00:09:10,420 --> 00:09:12,790
Lastly, we will log a message.

111
00:09:16,770 --> 00:09:20,700
Neon Destroy Hook will run when the component is destroyed.

112
00:09:21,090 --> 00:09:24,960
We can remove components from the page when we don't need them anymore.

113
00:09:25,320 --> 00:09:30,270
If the components is being removed from the document, Angular will run this hook.

114
00:09:30,630 --> 00:09:35,460
It'll give us the opportunity to remove functionality to prevent memory leaks.

115
00:09:35,730 --> 00:09:39,420
Unfortunately, we won't have a chance to test this function.

116
00:09:39,690 --> 00:09:42,720
We haven't learned how to destroy components yet.

117
00:09:43,230 --> 00:09:46,320
That wraps up the lifecycle hooks for this lecture.

118
00:09:46,590 --> 00:09:48,240
It's a lot of folks to work with.

119
00:09:48,510 --> 00:09:52,650
Luckily, you won't need every single one of them at most.

120
00:09:52,830 --> 00:09:56,700
You will probably use two or three hooks in a single component.

121
00:09:58,650 --> 00:10:07,500
The most commonly used hooks are the constructor N'Jie on in its N'Jie on changes and energy on destroyer

122
00:10:07,500 --> 00:10:08,070
hooks.

123
00:10:10,520 --> 00:10:17,180
Before we move on, there's one last warning I want to give hooks that run multiple times can impact

124
00:10:17,180 --> 00:10:20,870
the performance of your app if you need to use these hooks.

125
00:10:21,080 --> 00:10:23,990
Make sure you're not performing an intensive action.

126
00:10:24,320 --> 00:10:29,060
Otherwise, the performance of your app may suffer in the next lecture.

127
00:10:29,090 --> 00:10:31,940
We will continue learning about components.