I am faced with a situation where I need to manipulate the CSS classes of an element generated by a third-party library for which I do not have access to the source code.
While Angular typically recommends a specific method for adding and removing classes, that approach is not feasible in this scenario. Therefore, my question is: what is the best practice for achieving this task?
Consider the following hypothetical example on the DOM:
<custom-control>
<div class='one'>
</div>
</custom-control>
To address this issue, I have successfully implemented the following solution:
Firstly, I included ElementRef in the constructor of my component:
private myElement: ElementRef
Then, I used querySelector to target the element and apply the desired class:
const ele = this.myElement.nativeElement.querySelector('.one');
ele.classList.add('two');
As a result, the output would be:
<custom-control>
<div class='one two'>
</div>
</custom-control>
Subsequently (based on certain conditions), I may need to remove the added class:
ele.classList.remove('two');
NOTE: Given the constraints of not having access to the third-party code, how can this process be done in line with Angular's recommendations?