javascript's getElementsByClassName length not working in angular

Question

A simple javascript file is running absolute fine, But when I try to insert those code in angular (from assets OR inserting code in index.html file) giving unexpected value.

HTML code
<p class='collect'> this is text </p>
<p class='collect'> this is text </p>
<p class='collect'> this is text </p>

//js in separate file

var all = document.getElementsByClassName('collect');
console.log(all.length);

//returns 3

//js code in angular

var all = document.getElementsByClassName('collect');
console.log(all);

// returns 
HTMLCollection []
length: 3
0: p.collect
1: p.collect
2: p.collect 

// but in
console.log(all.length);
// returns 0

You're probably running the code in Angular too soon in the page lifecycle. Can you post the context of where it's called. — Kurt Hamilton, Feb 24 '20 at 12:10

score 1 · Answer 1 · answered Feb 24 '20 at 12:15

1

You should try document.querySelector('.collect').

answered Feb 24 '20 at 12:15

Sohan

558
6
17

using the ClassName selector is necessary , I need elements in the array – Amit Kumawat Feb 26 '20 at 07:25
@AmitKumawat, Is this is what you want? https://stackblitz.com/edit/angular-wtumlo – Maniraj Murugan Feb 26 '20 at 07:36
thanks @ManirajMurugan, but you did it from ts file, can you do it from js file ? like adding js file in assets, or inside a script tag in index.html. – Amit Kumawat Feb 26 '20 at 09:42
1

@AmitKumawat, You mean like this?? https://stackblitz.com/edit/angular-wtumlo?file=index.html – Maniraj Murugan Feb 26 '20 at 10:18
thanks @ManirajMurugan, actually DOM is loaded before the execution of code, I found some more ways to avoid this situation including yours. – Amit Kumawat Feb 27 '20 at 07:37
@AmitKumawat, You can try the methods inside ```ngAfterviewInit()``` lifecycle hook if dom is loaded initially..Anyhow happy coding.. – Maniraj Murugan Feb 27 '20 at 07:41

score 0 · Answer 2 · answered Feb 24 '20 at 12:12

0

I found this answer and I think you need to inject DOCUMENT in orden to work:

(I'm assuming you are using Angular and not AngularJS

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

@Component({...})
export class AppCmp {
   constructor(private document: DOCUMENT) {
      document.getElementsByClassName('collect');
      console.log(all.length);
   }
}

Let me know if that works for you.

answered Feb 24 '20 at 12:12

Richard Fazzi

433
3
9

I dont think injecting document is required.. OP can access the element using ElementRef , ViewChild or simply using queryselector – Amit Feb 24 '20 at 12:15
yes, of course, but this answer is if you need/want to use `document`. There are alternatives too as you said, @ViewChild being one. – Richard Fazzi Feb 24 '20 at 12:18
For using document, injection is not required. And you answer says I think you need to inject Document.. this might create confusion – Amit Feb 24 '20 at 12:22

score 0 · Answer 3 · answered Feb 24 '20 at 12:15

0

length is coming zero because till the time Angular component which having these p tags, has not loaded in dom. So put this code inside lifecycle hook ngAfterViewChecked.

answered Feb 24 '20 at 12:15

harsh_apache

433
4
10

I think they are loaded because on console.log(all); // returns HTMLCollection [] length: 3 0: p.collect 1: p.collect 2: p.collect // but in console.log(all.length); // returns 0 – Amit Kumawat Feb 26 '20 at 07:26

javascript's getElementsByClassName length not working in angular

3 Answers3