Angular2 retrieve all elements with class name

Question

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.

you can use `document.querySelectorAll('.classImLookingFor')` — Aravind, Apr 12 '17 at 17:37
Just what I was looking for. That works perfectly. For some reason though, document.getElementsByClassName didn't work for me,. Thanks for the speedy response. I was making it overly complicated — dekaha1, Apr 12 '17 at 18:43

score 88 · Answer 1 · answered Feb 22 '18 at 13:35

88

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.

answered Feb 22 '18 at 13:35

Paritosh

11,144
5
56
74

2

this is the actual way to get the rendered (querySelectorAll) value in Angular – SHUBHASIS MAHATA Sep 17 '20 at 09:59
Doesn't work for me. Using `document` worked as expected but this approach does not. Unfortunate because I can see the benefit of doing it this way. – JeneralJames Oct 11 '21 at 10:51
@JeneralJames, I think it is not working for you because you are searching element outside the elementRef and this.elem.nativeElement.querySelectorAll is searching only inside of it. – Shlomi Aharoni Feb 21 '22 at 16:32
1

`ElementRef` for type-safety. – CularBytes Apr 15 '22 at 13:35

score 17 · Answer 2 · answered Nov 10 '20 at 15:48

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')
}

score 13 · Answer 3 · answered Apr 12 '17 at 18:44

13

Answering as the comment worked for the OP.

You should be using

document.querySelectorAll('.classImLookingFor')

answered Apr 12 '17 at 18:44

Aravind

40,391
16
91
110

4

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"? – Skorunka František Feb 03 '18 at 14:00
@SkorunkaFrantišek, u're right, check [this answer](https://stackoverflow.com/questions/43376081/angular2-retrieve-all-elements-with-class-name/#48928778) – Paritosh Feb 26 '18 at 08:48
I upvoted because this is useful if you want to reference an element in the document which is outside the Angular component you are "in". – Yvonne Aburrow Jul 17 '19 at 19:12

Billy Barry · Answer 4 · 2017-04-12T17:50:09.687

5

This might be a little over-simplistic for your use case, but is there any reason you can't use the native DOM functions, like so?

var domRepresentation = document.getElementsByClassName('classImLookingFor');
var angularElement = angular.element(domRepresentation);

edited Apr 12 '17 at 17:50

answered Apr 12 '17 at 17:44

Billy Barry

187
6

modified version of the comment – Aravind Apr 12 '17 at 18:39
Looked right past the comment the first time I read this, sorry about that. – Billy Barry Apr 12 '17 at 18:40
3

I'm very new to Stack Overflow and saw there were 0 answers. Is it best practice to comment first instead of answering the question outright @Aravind ? – Billy Barry Apr 12 '17 at 18:43
6

Where does `angular` come from? Is that AngularJS or Angular2+? – Christian Feb 19 '20 at 11:06

score 2 · Answer 5 · answered Mar 17 '21 at 09:42

There are various ways to do but the latest provided by Angular 9+ versions are:

1.import Inject and DOCUMENT in angular.

import {Inject } from '@angular/core';
import { DOCUMENT } from '@angular/common';

2.Then create a reference in the constructor of the required class.

constructor(@Inject(DOCUMENT) private _document: HTMLDocument) {}

3.Use as a variable with all javascript methods available.

selectElement(): void {
 this._document.querySelector('#mySelectedId');
}

what is the benefits of using this `DOCUMENT` of angular/common and native document.* ? — Phoenix404, Jul 09 '21 at 21:45

score 0 · Answer 6 · answered Jul 18 '22 at 05:30

Use case; Press escape key -> Remove border of marked row

  resetMarkedRows():void{
    const rowContainer = document.getElementById('row-container');
    //get row node list
    const rowNodes = rowContainer && rowContainer.querySelectorAll('.row-outer');
    //convert node list to an array
    const rows = Array.from(rowNodes) as HTMLElement[];
    const markedRows = rows.filter((row:HTMLElement)=>{
      if(row.style.border == "1px solid rgb(0, 136, 255)"){
        return row
      }
    });
    markedRows[0].style.border = "none";
  }

mohsen malvandy niko · Answer 7 · 2018-08-07T14:56:40.753

-4

you need to use DOM in angular

var element=document.getElementsByClassName("X").item(0);

it works for me!

edited Aug 07 '18 at 14:56

answered Jul 28 '18 at 17:18

mohsen malvandy niko

139
1
5

2

might work in AngularJS, would not work in Angular 2+ – Yvonne Aburrow Jul 18 '19 at 12:52
4

You should not access DOM directly like that, it breaks Angular's abstraction over platform. Use ViewChild and/or Renderer2. – Looted Oct 25 '19 at 14:38

Angular2 retrieve all elements with class name

7 Answers7

Linked