1
00:00:00,210 --> 00:00:05,470
In this lecture, we're going to learn about lifecycle hooks throughout this section.

2
00:00:05,490 --> 00:00:08,550
We've seen how we can interact with components.

3
00:00:08,940 --> 00:00:15,690
Angular gives us the option of having refined control over the changes in our components through lifecycle

4
00:00:15,690 --> 00:00:16,230
hooks.

5
00:00:16,620 --> 00:00:20,100
They are functions that run during events and our components.

6
00:00:20,370 --> 00:00:25,080
Specifically, they run when components are experiencing changes.

7
00:00:25,710 --> 00:00:28,620
There are a lot of lifecycle hooks in angular.

8
00:00:28,890 --> 00:00:30,720
Some are more common than others.

9
00:00:30,960 --> 00:00:33,120
Let's start with these simpler hooks.

10
00:00:33,420 --> 00:00:36,180
The first hook is the constructor function.

11
00:00:36,570 --> 00:00:39,870
We will be working inside the post component class.

12
00:00:40,170 --> 00:00:41,610
Inside this class.

13
00:00:41,730 --> 00:00:43,560
Add the constructor function.

14
00:00:46,080 --> 00:00:49,250
Technically, this is not a hook run by Angular.

15
00:00:49,450 --> 00:00:53,220
Instead, it's a default hook in the JavaScript language.

16
00:00:53,490 --> 00:00:57,210
It gets called during the initialization of our component.

17
00:00:57,540 --> 00:01:03,430
It is the first function that will run whenever we use our component inside this function.

18
00:01:03,450 --> 00:01:04,890
Let's log a message.

19
00:01:09,180 --> 00:01:12,960
There's another hook for when our component is initialized.

20
00:01:13,200 --> 00:01:17,790
It's called the N.G. on init function inside our class.

21
00:01:17,970 --> 00:01:22,310
We will define this function like before we will log a message.

22
00:01:25,830 --> 00:01:30,690
We can write the energy on an IT function in our component without a problem.

23
00:01:30,960 --> 00:01:33,810
However, it's not considered good practice.

24
00:01:34,110 --> 00:01:36,240
There is a better way to write this function.

25
00:01:36,450 --> 00:01:42,930
We can implement an interface we learned about interfaces in the TypeScript section of this course.

26
00:01:43,470 --> 00:01:49,740
They are blueprints for objects to help the compiler understand the properties and methods inside an

27
00:01:49,740 --> 00:01:50,310
object.

28
00:01:50,820 --> 00:01:56,070
Angular defines a set of interfaces for life cycle functions and a component.

29
00:01:56,460 --> 00:01:59,880
There are two benefits to adding them to our component.

30
00:02:00,150 --> 00:02:02,880
Let's look at what those are at the top.

31
00:02:03,090 --> 00:02:09,419
We can update the angular core package to include an interface called on in it.

32
00:02:11,970 --> 00:02:18,150
Previously, we learned how to apply interfaces on objects with curly brackets syntax.

33
00:02:18,480 --> 00:02:24,990
We can apply interfaces to classes by adding the implements keyword after the class name, followed

34
00:02:24,990 --> 00:02:26,880
by the name of the interface.

35
00:02:27,330 --> 00:02:30,960
Let's implement the on init interface to the class.

36
00:02:33,640 --> 00:02:40,000
After adding this class, we're going to get an error, the error we're receiving is the first benefit

37
00:02:40,000 --> 00:02:41,950
of implementing an interface.

38
00:02:42,310 --> 00:02:48,280
The error is telling us we haven't properly added the nji on init function to the class.

39
00:02:48,640 --> 00:02:51,380
It might be confusing at first, but it's not.

40
00:02:51,400 --> 00:02:56,470
Once we look at the error carefully, I've purposely misspelled the function.

41
00:02:56,680 --> 00:02:58,870
The letter O is capitalized.

42
00:03:01,290 --> 00:03:05,040
After updating the letter, the error on the class is gone.

43
00:03:05,430 --> 00:03:09,360
Implementing an interface can help us catch mistakes like these.

44
00:03:09,630 --> 00:03:12,480
Typos are a common problem in programming.

45
00:03:12,810 --> 00:03:17,640
You may be thinking what if we misspelled the interface name in the import statement?

46
00:03:17,970 --> 00:03:22,560
For example, I'll change the O from uppercase to lowercase.

47
00:03:25,020 --> 00:03:28,230
After doing so, TypeScript will throw an error.

48
00:03:28,530 --> 00:03:35,280
It's telling us this interface does not exist, therefore it's practically fail proof to misspell the

49
00:03:35,280 --> 00:03:36,990
interface accidentally.

50
00:03:37,260 --> 00:03:38,850
Alan, do this change?

51
00:03:39,330 --> 00:03:45,240
One last thing to point out let's hover our mouse over the energy on init function.

52
00:03:45,630 --> 00:03:48,450
The editor will give us a description of this function.

53
00:03:48,720 --> 00:03:53,640
It's a great way to learn more about a function in case you forget what it does.

54
00:03:54,000 --> 00:04:00,300
By implementing this interface, we can avoid typos and we are given a description of the function.

55
00:04:00,690 --> 00:04:05,760
It's always considered good practice to implement an interface for lifecycle hooks.

56
00:04:06,300 --> 00:04:13,230
In the resource section of this lecture, I provide a link to the Lifecycle Hooks documentation page.

57
00:04:15,730 --> 00:04:22,330
This page will provide us with detailed information on the various lifecycle hooks in, angular on the

58
00:04:22,330 --> 00:04:23,110
sidebar.

59
00:04:23,320 --> 00:04:27,400
There is a link to a section called Lifecycle Event Sequence.

60
00:04:29,810 --> 00:04:34,700
This part of the page will give us a list of available lifecycle hooks in Angular.

61
00:04:35,060 --> 00:04:39,380
I recommend checking it out if you want more information about each hook.

62
00:04:39,650 --> 00:04:41,210
Let's go back to the editor.

63
00:04:43,810 --> 00:04:49,180
The energy on a function will run when the component is initialized with the data.

64
00:04:49,450 --> 00:04:52,390
It's completely different from the constructor function.

65
00:04:52,810 --> 00:04:55,870
The data will have changed from both functions.

66
00:04:56,230 --> 00:05:02,440
To better understand, let's update our long statements to include the post image property.

67
00:05:04,980 --> 00:05:09,270
What do you think will happen, do you think we will see the same values?

68
00:05:09,480 --> 00:05:10,470
Let's find out.

69
00:05:10,710 --> 00:05:13,500
Refresh the browser with the console opened.

70
00:05:16,070 --> 00:05:20,360
The post image property will be empty in the constructor function.

71
00:05:20,690 --> 00:05:26,990
However, the property will contain the URL to the image in the nji on init function.

72
00:05:27,380 --> 00:05:28,670
Interesting, right?

73
00:05:29,090 --> 00:05:35,300
During the constructor function, the data passed down from the parent to the child component hasn't

74
00:05:35,300 --> 00:05:36,080
occurred yet.

75
00:05:36,410 --> 00:05:39,740
Therefore, we won't have access to input data.

76
00:05:40,340 --> 00:05:44,360
The nji on init function runs after binding has occurred.

77
00:05:44,690 --> 00:05:50,690
If we need the data from the parent to be available when the component is initialized, we should use

78
00:05:50,690 --> 00:05:55,160
the energy on init function just like the constructor function.

79
00:05:55,310 --> 00:06:02,270
This hook runs once it's a great hook for making the changes to our component after the data has been

80
00:06:02,270 --> 00:06:03,050
sent down.

81
00:06:03,680 --> 00:06:06,770
Let's explore the other hooks in the next lecture.