angular 9 reorder/sort siblings dom by using querylist(contentChildren or ViewChildren)

Question

I was wondering whether angular let you reorder/sort the sibling DOMs or not.

For example, If I want to re-arrange(change the order) the opt component. How can I do it?

my-lib-select is a select or Dropdown component and opt is a child component to generate the options for select.

Component is generated or render in other components like this.

Ie app.component.ts

<my-lib-select [customComparator]="customComparatorFn">
  <opt *ngFor="let x of finalCompOptions">{{x}}</opt> 
</my-lib-select>

In my-lib-select , I have a QueryList

  @ContentChildren(OptComponent, {descendants: true, read: OptComponent})
  options: QueryList<OptComponent>;
....
if (this.customComparator) {
   const arr = this.options.toArray();
   arr.sort(this.customComparator);
   this.options.reset(arr);
}

But this is not ordering the siblings or sorting.

I know, I can sort the finalCompOptions in app.component.ts but I would like to sort the options from my-lib-select .

Anybody can help me out with this?

Thanks in advance.

Answer 1

I feel you've got two ways of tackling this.

Method 1 - You reorder the items within app.component.ts prior to render/passing them through your ngFor.

Method 2 - You reorder using a custom pipe like seen in this answer here