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>

Let say I have this generates . In my component I sort the QueryList and now I want the view do the same and shows — Soraya Siahpolo, May 02 '20 at 07:20
Can you show the HTML. Oh, I've just seen that you added it to a comment - it would be far better to add it to your question. — Kurt Hamilton, May 02 '20 at 07:49

score 1 · Answer 1 · answered May 02 '20 at 07:54

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.

Angular DOM reorder elements in QueryList

1 Answers1