Javascript code number likes by typescript / angular

Issue

I have some javascript code which I'm trying to add to my component.ts in my angular project.

Here is the code:

ngOninit() {
  let areaNum = document.getElementsByClassName("some-area").length;

  // The issue is in the code below:
  for (let area of document.getElementsByClassName("some-area")) {
    area.style.height = 100 / areaNum + "%";
  }
}

The error is:

Type 'HTMLCollectionOf<Element>' must have a '[Symbol.iterator]()' method that returns an iterator.ts(2488)

How can I fix this so it work in Angular?

Solution

Document.getElementsByClassName returns a live HTMLCollection. MDN link

You can make it into an array using Array.from

Array.from(document.getElementsByClassName("some-area"))

Answered By - Jonathan