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

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.

I.e app.component.ts

<my-lib-select [customComparator]="customComparatorFn">
  <opt *ngFor="let x of finalCompOptions"></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.

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