I want to show you now how to manipulate the dumb elements using elements ref in this case.
What I want is to manipulate the input where I introduce the number of seconds of an old timer.
There's one element.
Ref is a reference of a component that you can get using view child or counting child.
So I'm going to create the property time input of type element ref using disintegrator below my view.
Children, I read this at by a child called time input.
That is going to be type element the ref.
And of course I have to import element ref and also the BHL to create or I'm using at this point you
can see into complaining and that's because time input cannot be created because it doesn't know what
elements from The View has to be associated with.
So I go to my app component and the app output input and want to create the template reference, variable
timer input.
In fact, I can give it any name.
But the point is that back in the component code now, I can tell my child to find the element with
this ref as a reference to my time input.
OK, I want to cancel like this properly in order to see how does it look like as before, this content
is available in the after init lifecycle event.
So I can go to the method and you have to be in it in order to cancel the trip.
So cancel Luk.
Of this that time input.
I save these and go to the browser to see the council output, as you can see here, there is an element,
Trepp with the property native element and several classes opening the element.
3F, you can see the native element property.
And inside it, there's a lot of methods and properties.
Native element is an angular abstraction of this specific node of the drum associated with an element.
Thanks to the native element.
You can manipulate the dumb and do stuff like adding or removing classes or attributes to that node,
or you can use methods of that element.
I'm going to show you some examples on how to do it.
So back to Abcam.
Plenty components in NGF to be in it.
What I will do is to add an attribute.
For example, I can add a placeholder to my input in case and have no content below that.
A look at right this that time input, that native element that is the property representing my input.
And now I can use a method, set, attribute and attribute named Placeholder so you can use a similar
standard attributes.
And on the text I want to show as a placeholder like anthracyclines.
Another thing I can do is to add the class dynamically out of this with this that time input that native
element, and then in a similar way, I can do a class list that and these are the method add to our
new classes, like the time in class.
And when I grade right now, I open the SAS file to create this class and we'll all after the cancel
button at that time in.
And inside, I will change a little bit the font style.
Font weight, for example, 600.
I also add some color like men and Rachel say, and finally font size of 12 pixels, if I could also
see the results again and they click the button.
Here's my input with a different color, a looking bold.
You can say it better with some more numbers.
If I remove the content, I can see the anthracyclines text that is the placeholder aerodynamically.
If you inspect the element, you can see how the input has this placeholder attribute with the value.
Enter seconds.
But remember, I have my code.
OK, pay attention.
Now I close an opinion again and it would be really nice as I'm expected to introduce the amount of
seconds.
It would be nice, the input to be already focused so you don't have to click.
I need to start writing every time.
I can also do that with my native element.
So I go back to the code and come on in two years and they'll look for the method that makes the visible
the show, what time and method, and then said I will call the focus method of my native element.
This that time input that native element that focus directly if I move to the browser to so the results,
I click the button and there's no focus on my input.
What is this?
Well, as I have manipulated the drum directly, Angular has not detected the changes inside the short
time, a method intended that the ref is useless in this case.
So the only option I have is to call this into the timeout function.
So angular detect a change.
So I right set timeout.
I personally function and basically remove that focus call inside the arrow function I save and now
I can go back to my browser and I can see that focus now is really working.
You can see the input is fuscus.
If I close and I need to gain the input is focused and all the time.
Let's make a short summary.
I wanted to show you how to dynamically manipulate this input from code.
So what I did is to create a template reference variable in input called Temma Input that allows me
to access this element from typescript side thanks to the new child, the creator here.
I saw this reference in the time input property of type elements, ref, and later I can use it to access
the native element that represents the element in the DOM to add some attributes and new classes or
when use the element API.