DebugElement.queryAll can return results in different order than DOM.

I’m submitting a … (check one with “x”)

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior DebugElements are returned from DebugElement.queryAll() in the same order they were first created in the ViewContainer regardless if they were moved by a structural directive like NgFor. If they were moved, then the order is out of sync with with the DOM.

Expected behavior DebugElements should be returned from a query in the order they appear within the DOM. Order should be updated when underlying ViewRefs are moved around in a ViewContainer

Minimal reproduction of the problem with instructions Plunker Reproducing the Issue

Running plunker will run tests that are almost identical to the unit tests for NgFor. Tests illustrate how adding and removing ViewRefs from a ViewContainer work as expected. Two tests illustrate how moving ViewRefs and using DebugElement to query for the moved items fails. Two tests illustrate how the DOM is in the correct order by using the native querySelectorAll() method.

What is the motivation / use case for changing the behavior? DebugElements should be returned in the order they appear in the DOM when queried for.

Please tell us about your environment: Windows 10 x64

• Angular version: 2.2.1 with angular-cli 1.0.0-beta.20-4 (plunker not at this version)

• Browser: all

• Language: Typescript

• Node (for AoT issues): node --version = 7.1.0

[jshoudy11]

No clean solution but I found a workaround. Something like:

const debugEls = element.queryAll(‘foo’); const domEls = Array.from(element.nativeElement.querySelectorAll(selector)); debugEls.sort((a: DebugElement, b: DebugElement) => { return domEls.indexOf(a.nativeElement) - domEls.indexOf(b.nativeElement); }); return debugEls;

[amitpchigadani]

Yes, Thanks @jshoudy11 , We can verify our view template directly by fetching DOM elements instead of DebugElements. That’s a nice alternative as of now. Hope this issue resolves sooner.