Currently, I am in the process of developing a game using Angular (version 4). I understand that direct manipulation of the DOM is typically not recommended when working with Angular. However, for the particular functionality I'm trying to achieve, I'm struggling to find an alternative approach.
The component I require needs to handle its own DOM by updating the rotational positions of multiple elements simultaneously, similar to a model of a solar system. I see two possible paths to take: The first involves direct DOM manipulation that updates based on changes in component input. The second option would be to utilize inline style tags within the component, such as
[style.whatever]="thing.whatever"The second option feels like it still involves some level of direct DOM manipulation, albeit not in JavaScript.
I strive to follow best practices whenever possible, so any guidance on this matter would be greatly appreciated.
It's worth noting that I have no intention of incorporating JQuery into this project.
Update
Upon further reflection, I've come to realize that I don't actually need programmatic DOM updates. Instead, I simply need to establish the initial CSS properties for the starting positions and animation speed. Given that the animation is constant and predictable, leveraging CSS alone should suffice. Nonetheless, I am curious whether it would be more appropriate to set these CSS properties in the code or as attributes of the component itself.