Anglo is platform agnostic and allows it to render in all the platforms different from the Web browser,
the usage of this native element works well in the browser.
However, it will fail in other platforms or in case you want to use the same code in different environments.
This is the case, for example, of server side rendering with Universal, and you should not be disappointed
if you're rendering in server without them access.
It is normal that you cannot use objects that can directly manipulate the dumb for those situations.
You can use the render service that provides an API to access the elements in a safe way on any platform.
In fact, the render service has a bolt wetangula for and now it is recommended to use the renderer
to mention that they have a slightly different API renderer chose the one I will show you.
The first step is to inject the renderer to service in a component.
I inject the private renderer, of course, after important.
Here is the import, the runner to object from and worker and I only have to go to this and you have
to be in it and replace those two calls from here by renderer to appx methods that allows my code to
work in any platform despite it is a browser or not, in order to either not to be to an element.
The method as this that renderer, that set attribute is almost identical to the one from Netiv Element.
But I need the reference to the element this that time input, that negative element and then the attribute
I want to use placeholder.
And, of course, the value of the attribute and the second.
OK, so I can remove this and now I'm doing the same thing, but using render the method to the class
works in a very similar way so I can remove the negative filament at class method and instead use these
that render that up class and the inside.
I need the reference of the dummy element where I want to add some class, the STEM input negative element,
and then I read directly the name of the class thymine.
OK, so this way, what I'm achieving is to make some changes on the elements, but in a safe way.
So this code can work well on any kind of platforms.
If you move to the browser, you can say that as before, the input uses this color and it's bold.
And when I remove the content, the placeholder appears as expected.
This is the one moment where I'm accessing them in an unsafe way.
However, when I focus the form input, so I move to the show what time and method in order to follow
the same approach with a time, input and development focus call.
In this case, I will do this, that renderer that I'm here.
I use the method to select group element that allows me to get the reference of a dumb element in my
case, this that time input that negative element.
And this is returning me a safe version of the negative element so I can safely use the focus method.
I can remove the old one, and then if I move to the browser, as you can see, the input is still focused
on click.
The difference is that now this code can be executed in other environments than the browser like server
side rendering or with the mechanisms.
And what I provide to you to run all the code inside the web work improving the graphical performance
of your app.
To sum up, you have seen how to add an attribute, a class or even use element APIs like focus in a
dynamic and safe way, but using the renderer to service that have all those methods you can use over
the element if you want to manipulate.