Dynamic orderBy with dynamic ascending/descending

[Et3rnal]

[X] bug report => search github for a similar issue or PR before submitting
[ ] feature request

Current behavior

I can't seem to find a way to change ascending/descending dynamically, I a drop-down list of of values to order by and I have a toggle button to switch between ascending/descending

the documentation says to do this values | orderBy: '+a'

Let say selectOrder = a and aORd = +

How can I represent this? Updating the options inside the options list it so much for simple thing.

Expected behavior

So is there a way to implemnt this other than having a single source for the list? Maybe another syntics ? or something I didn't thing of? 💃

[Et3rnal]

Here is what I endedup doing Template: | orderBy: selectedOrder

TS:

  selectedOrder:string = "";
  ascendingOrder:aORd = "+";

//use this to trigger order change
  changeOrder(flip:boolean = false){
    if(flip){
      if(this.ascendingOrder == "+"){
        this.ascendingOrder = "-";
      }else{
        this.ascendingOrder = "+";
      }
      this.criteriaOptions.forEach(option => option.value = option.value.replace(/^.{1}/g, this.ascendingOrder));
      this.selectedOrder = this.selectedOrder.replace(/^.{1}/g, this.ascendingOrder);
    }
  }

//order by options
  criteriaOptions:any[] = [
    { value: this.ascendingOrder+'name', label: 'Name' },
    { value: this.ascendingOrder+'role', label: 'role' },
  ];