Angular QueryList returns different types than click from event listener

Question

I have a problem comparing the content of a list of QueryList<ElementRef> . I like to distinguish some elements to build a closing logic for a menu.

I have some buttons in a toolbar, these buttons are Angular Material buttons of type mat-button. The buttons are assigned by #navButton to get them in the QueryList. The problem is, the type of the clicked button (nav-button) from the event listener is different then the types in the QueryList. If I use a normal button instead of Material mat-button my code runs as expected.

What is the reason to have different types in QueryList than the event listener? What can I do?

I posted my code on GitHub: https://github.com/Christoph1972/AngularMaterialHeaderTemplate

Please can you have a look into it? The important lines of code are in main-header.component.ts and main-header.component.html

Kind Regards Christoph

Answer 1

if you want to get ElementRefs of the element provide it in read config field.

@ViewChildren('navButton', {read: ElementRef})
listOfNavButtons!: QueryList<ElementRef>;

in this case you will get QueryList of element refs of all the elements that match

And changing the comparison to: if (e.target === x.nativeElement.firstChild || e.target === x.nativeElement)