Angular DOM reorder elements in QueryList

Question

I have a QueryList of objects. I need to reorder the DOM element based on user interaction:

    @ViewChildren('mytemplate') temp: QueryList<MyObjects>;

In ngAfterViewInit :

    let arr = this.temp.toArray();

    // sort the arr here (it gets sorted correctly)

    this.temp.reset(arr) // sorts the temp but DOM elements stays in the same order

The QueryList is sorted but the order in my view stays the same. I need to reorder the view as well. Any idea how I can dynamically sort the view based on QueryList?

Let say I have

<temp #mytemplate *ngFor="let n of nums"> 

this generates

<temp user1>
<temp user2>
<temp user3>

In my component I sort the QueryList and now I want the view do the same and shows

<temp user2>
<temp user3>
<temp user1>

Answer 1

Something is generally wrong if we feel the need to modify the DOM directly. In Angular we build our HTML from our model. So in this case you should just reorder your model.

nums = [ 1, 2, 3 ];

sort() {
  this.nums = [ 2, 3, 1 ];
}

This is obviously a highly abstracted answer to your highly abstracted question.