1
00:00:00,300 --> 00:00:06,600
In this lecture, we are going to select elements with Angular in your editor, open the clip template

2
00:00:06,600 --> 00:00:07,080
file.

3
00:00:09,490 --> 00:00:12,520
Insider templates, we have a video tag.

4
00:00:12,820 --> 00:00:19,180
You can find it by searching for a comment that says Video Player by default, the static video player

5
00:00:19,180 --> 00:00:22,330
will load a webcam file in a future lecture.

6
00:00:22,450 --> 00:00:26,230
We're going to replace the source with the relevant AMP for file.

7
00:00:26,500 --> 00:00:29,560
For now, our goal is to make the player functional.

8
00:00:29,890 --> 00:00:34,990
Once we've got a functioning player will load the video and the previous lecture.

9
00:00:34,990 --> 00:00:38,170
We install the library called video J.S..

10
00:00:38,440 --> 00:00:42,130
We can initialize the video player with this packagers functions.

11
00:00:42,400 --> 00:00:46,780
Before we do, we need to select the video element in the template.

12
00:00:47,200 --> 00:00:53,500
Throughout most of this course, we've experienced how angular exposes properties and methods to a template.

13
00:00:54,100 --> 00:00:57,220
We're in a situation where the reverse needs to be true.

14
00:00:57,580 --> 00:01:01,570
The video element needs to be exposed to the component class.

15
00:01:01,840 --> 00:01:05,810
By default, Angular does not expose elements to the class.

16
00:01:06,070 --> 00:01:09,340
We need to manually query the template for an element.

17
00:01:09,670 --> 00:01:12,130
There's a decorator for this specific action.

18
00:01:12,460 --> 00:01:14,080
We'll talk about it in a moment.

19
00:01:14,710 --> 00:01:19,360
First, we must add a template variable to the element we want to select.

20
00:01:19,780 --> 00:01:24,580
Otherwise we won't be able to select the video tag on this tag.

21
00:01:24,700 --> 00:01:27,280
Add a variable called video player.

22
00:01:30,040 --> 00:01:33,160
Next, we're going to remove the set up attribute.

23
00:01:35,750 --> 00:01:42,650
The video library is auto selecting elements on a template the set up attribute can be added to configure

24
00:01:42,650 --> 00:01:43,220
the player.

25
00:01:43,580 --> 00:01:47,500
However, we aren't going to configure the player through CMLL.

26
00:01:47,810 --> 00:01:49,400
We'll do it through JavaScript.

27
00:01:49,730 --> 00:01:52,820
I added it then for previewing the static template.

28
00:01:53,150 --> 00:01:55,550
Let's begin selecting it in our class.

29
00:01:55,850 --> 00:01:58,460
Open the clip component class file.

30
00:02:01,200 --> 00:02:07,530
At the top of the file import, the View child decorator and element reference class from the angular

31
00:02:07,530 --> 00:02:09,030
slash core package.

32
00:02:11,470 --> 00:02:18,460
Next, create an optional property inside the class called Target, decorated with the view child decorator.

33
00:02:21,950 --> 00:02:28,670
They view Child Target will perform a query on the template with this decorator, we can select components,

34
00:02:28,790 --> 00:02:31,790
directives and regular HTML elements.

35
00:02:32,150 --> 00:02:37,970
If we're selecting a regular HTML elements, the element must have a template variable.

36
00:02:38,300 --> 00:02:40,640
Let's select the video player elements.

37
00:02:43,230 --> 00:02:46,290
Our property will be updated to store this element.

38
00:02:46,590 --> 00:02:49,560
We should annotate it with the Element Ref class.

39
00:02:52,110 --> 00:02:57,780
Whenever we're selecting elements with the View child decorator, the property will store an instance

40
00:02:57,780 --> 00:02:59,730
of the element reference class.

41
00:03:00,150 --> 00:03:04,620
There's one more modification we're going to add to the query before we do.

42
00:03:04,710 --> 00:03:06,690
Let's talk about change detection.

43
00:03:07,840 --> 00:03:11,380
Change detection was a topic we covered in an earlier section.

44
00:03:11,680 --> 00:03:18,370
Let's quickly review it Angular is capable of updating our template whenever a property updates in our

45
00:03:18,370 --> 00:03:18,940
class.

46
00:03:19,360 --> 00:03:22,120
This process is known as change detection.

47
00:03:22,510 --> 00:03:28,960
It plays a vital role in keeping our apps templates synchronized with our data components go through

48
00:03:28,960 --> 00:03:31,300
change detection when they're initialized.

49
00:03:31,600 --> 00:03:37,750
Therefore, we can define lifecycle functions in our component to wait for change detection to finish.

50
00:03:38,140 --> 00:03:45,880
We're going to focus on two lifecycle functions the Nji on init and N.G. after and it functions.

51
00:03:46,420 --> 00:03:50,620
The energy on init function is the first lifecycle function to run.

52
00:03:50,980 --> 00:03:54,340
It'll guarantee that our components data is initialized.

53
00:03:54,640 --> 00:04:00,250
For example, if we have input data, will be able to access them in the components.

54
00:04:00,910 --> 00:04:05,800
The energy after init function runs after the template has been initialized.

55
00:04:06,160 --> 00:04:10,090
We can assume structural directives have been processed on the template.

56
00:04:10,510 --> 00:04:14,350
We can safely assume this directive has processed the condition.

57
00:04:14,800 --> 00:04:20,350
The template inside the NGF directive will be rendered if the condition passes.

58
00:04:20,709 --> 00:04:23,770
There's a huge distinction to make between these functions.

59
00:04:24,070 --> 00:04:27,520
The nji on init function has access to the template.

60
00:04:27,760 --> 00:04:31,180
However, we are not guaranteed that the template is ready.

61
00:04:31,450 --> 00:04:35,200
If we try to access an element inside a loop or condition.

62
00:04:35,380 --> 00:04:37,360
It may not be easily accessible.

63
00:04:37,600 --> 00:04:41,350
Even worse, it may be gone after we've tried interacting with it.

64
00:04:42,770 --> 00:04:49,370
For this reason, properties decorated with the View child decorator should be accessed from the nji

65
00:04:49,370 --> 00:04:50,690
after init function.

66
00:04:51,020 --> 00:04:57,020
By default, the decorator will wait for the template to be initialized before updating this property

67
00:04:57,020 --> 00:04:57,950
with the element.

68
00:04:58,250 --> 00:05:00,230
But there is an exception to this rule.

69
00:05:00,470 --> 00:05:02,390
Let's switch over to the template.

70
00:05:02,900 --> 00:05:05,450
The video tag is entirely static.

71
00:05:05,690 --> 00:05:10,490
We're not wrapping it with a loop or condition, nor is it wrapped with a component.

72
00:05:10,790 --> 00:05:14,360
It's not necessary to wait for that template to be initialized.

73
00:05:14,600 --> 00:05:17,090
The video tag is ready from the start.

74
00:05:17,420 --> 00:05:23,600
We can override the default behavior by adding an object of options to the view child decorator.

75
00:05:23,930 --> 00:05:25,970
Switch back to the component class.

76
00:05:26,540 --> 00:05:34,010
The View Child Decorator has a second argument Let's pass in an object in this object at a property

77
00:05:34,010 --> 00:05:36,800
called static with a value of true.

78
00:05:39,430 --> 00:05:46,120
By setting the static property to true, the View child decorator will update this property with the

79
00:05:46,120 --> 00:05:52,300
element before the N.G. on init function is called in our energy on init function.

80
00:05:52,540 --> 00:05:54,940
It is safe to initialize the video player.

81
00:05:55,240 --> 00:05:58,060
Let's take care of this step in the following lecture.