HTMLElement properties return undefined -- Angular

Question

I am writing an Angular component that has a QueryList of HTMLElements and when iterating over the list, I am able to log each element to console. However when I try to access a property of the element it returns undefined. This is true for every property of the element. I have made sure that the elements are actually present in the list, but they are present as objects with the property 'nativeElement' Here is the console

Thank you for considering this.


@ViewChildren('element') elements !: QueryList<HTMLElement>

function()
  {
    this.elements.forEach(function(element) {
      console.log(element) //prints object with correct data to console
      console.log(element.className) //prints undefined
    })
  }

Sagun Gautam · Accepted Answer · 2021-01-29 00:35:21Z

2

Hey @Drew have you tried in this way I have shown below as nativeElement object which exposes all the methods and properties of the native elements in angular. Replace QueryList<HTMLElements> with QueryList<ElementRef> then do as shown below.

console.log(element.nativeElement.className);

edited Jan 29, 2021 at 0:35

answered Jan 29, 2021 at 0:13

Sagun Gautam

4726 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

oz1985oz · Accepted Answer · 2021-01-29 00:30:32Z

1

You need to change the typescript in @viewchildren to QueryList<ElementRef> like this:

  @ViewChildren("element") elements!: QueryList<ElementRef>;

Than you can see the autocomplete of the element in the correct way -

console.log(element.nativeElement.className);

Here is an example on StackBlitz

answered Jan 29, 2021 at 0:30

oz1985oz

4272 silver badges9 bronze badges

Collectives™ on Stack Overflow

HTMLElement properties return undefined -- Angular

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related