In this lecture, we are going to select elements with Angular in your editor, open the clip template
file.
Insider templates, we have a video tag.
You can find it by searching for a comment that says Video Player by default, the static video player
will load a webcam file in a future lecture.
We're going to replace the source with the relevant AMP for file.
For now, our goal is to make the player functional.
Once we've got a functioning player will load the video and the previous lecture.
We install the library called video J.S..
We can initialize the video player with this packagers functions.
Before we do, we need to select the video element in the template.
Throughout most of this course, we've experienced how angular exposes properties and methods to a template.
We're in a situation where the reverse needs to be true.
The video element needs to be exposed to the component class.
By default, Angular does not expose elements to the class.
We need to manually query the template for an element.
There's a decorator for this specific action.
We'll talk about it in a moment.
First, we must add a template variable to the element we want to select.
Otherwise we won't be able to select the video tag on this tag.
Add a variable called video player.
Next, we're going to remove the set up attribute.
The video library is auto selecting elements on a template the set up attribute can be added to configure
the player.
However, we aren't going to configure the player through CMLL.
We'll do it through JavaScript.
I added it then for previewing the static template.
Let's begin selecting it in our class.
Open the clip component class file.
At the top of the file import, the View child decorator and element reference class from the angular
slash core package.
Next, create an optional property inside the class called Target, decorated with the view child decorator.
They view Child Target will perform a query on the template with this decorator, we can select components,
directives and regular HTML elements.
If we're selecting a regular HTML elements, the element must have a template variable.
Let's select the video player elements.
Our property will be updated to store this element.
We should annotate it with the Element Ref class.
Whenever we're selecting elements with the View child decorator, the property will store an instance
of the element reference class.
There's one more modification we're going to add to the query before we do.
Let's talk about change detection.
Change detection was a topic we covered in an earlier section.
Let's quickly review it Angular is capable of updating our template whenever a property updates in our
class.
This process is known as change detection.
It plays a vital role in keeping our apps templates synchronized with our data components go through
change detection when they're initialized.
Therefore, we can define lifecycle functions in our component to wait for change detection to finish.
We're going to focus on two lifecycle functions the Nji on init and N.G. after and it functions.
The energy on init function is the first lifecycle function to run.
It'll guarantee that our components data is initialized.
For example, if we have input data, will be able to access them in the components.
The energy after init function runs after the template has been initialized.
We can assume structural directives have been processed on the template.
We can safely assume this directive has processed the condition.
The template inside the NGF directive will be rendered if the condition passes.
There's a huge distinction to make between these functions.
The nji on init function has access to the template.
However, we are not guaranteed that the template is ready.
If we try to access an element inside a loop or condition.
It may not be easily accessible.
Even worse, it may be gone after we've tried interacting with it.
For this reason, properties decorated with the View child decorator should be accessed from the nji
after init function.
By default, the decorator will wait for the template to be initialized before updating this property
with the element.
But there is an exception to this rule.
Let's switch over to the template.
The video tag is entirely static.
We're not wrapping it with a loop or condition, nor is it wrapped with a component.
It's not necessary to wait for that template to be initialized.
The video tag is ready from the start.
We can override the default behavior by adding an object of options to the view child decorator.
Switch back to the component class.
The View Child Decorator has a second argument Let's pass in an object in this object at a property
called static with a value of true.
By setting the static property to true, the View child decorator will update this property with the
element before the N.G. on init function is called in our energy on init function.
It is safe to initialize the video player.
Let's take care of this step in the following lecture.