Can anyone help with how to find 'All' Elements with a particular class name in Angular 2? I thought it would be trivial but it's giving me more problems that was prepared for.
<span class="classImLookingFor">foo</span>
<span class="classImLookingFor">Voo</span>
<span class="classImLookingFor">Moo</span>
I thought by doing what I have below would return all the elements with class "classImLookingFor" but it only returns the first instance.
constructor(private renderer: Renderer){}
ngAfterViewInit(){
const el = this.renderer.selectRootElement('.classImLookingFor');
this.renderer.setElementAttribute(el, 'tabindex', 0);
}
Afterwards, my markup looks like this.
<span class="classImLookingFor" tabindex="0">foo</span>
<span class="classImLookingFor">Voo</span>
<span class="classImLookingFor">Moo</span>
It seems like I should be able to create a Renderer array, but that doesn't seem to work either. I need to manipulate each element with that class name. Thanks in Advance
Doesn't this return all the elements in the DOM? Is there a way how to return only elements generated by the Angular component I'm "in"?
You need to...
Inject ElementRef in the constructor
constructor(private renderer: Renderer, private elem: ElementRef){}
Find the elements you are searching using querySelectorAll api.
ngAfterViewInit(){
// you'll get your through 'elements' below code
let elements = this.elem.nativeElement.querySelectorAll('.classImLookingFor');
}
The answer @Aravind has provided is not the best for the performance as it will search the whole DOM.
This solution will just search the DOM inside the current component.
Angular 10+ document compatibility with SSR, import:
import { DOCUMENT } from '@angular/common'
then inject:
constructor(@Inject(DOCUMENT) private _document: HTMLDocument) {
}
And use in your component/ directive like this:
doSomething(): void {
this._document.querySelectorAll('.classImLookingFor')
}
Answering as the comment worked for the OP.
You should be using
document.querySelectorAll('.classImLookingFor')