I am trying to clean up all jQuery related things in my application. While I was doing that I was in a confusion to use between javascript methods and angular native methods. So I need some clarifications for my below codes.
With jQuery to add and remove class dynamically:
$('.my-class').removeClass('list-hide').addClass('list-show');
In Javascript:
var element = document.getElementByClassName('.my-class');
element.classList.remove('list-hide');
element.classList.add('list-show');
Using TypeScript:
const element = this.elemRef.nativeElement.querySelector('.my-class');
element.classList.remove('list-hide');
element.classList.add('list-show');
The thing is I have many scenarios as above to access by DOM Id's and class names. And If I go by ElementRef I may end up in writing this.elementRef.nativeElement
many times.
Also In the official documentation it is said that - ' if direct access to native elements is not supported, use Render2' with a caution notice.
So kindly help me with better ways to access DOM elements without more repetition and jQuery from my Angular application.