Dynamic orderBy with dynamic ascending/descending about angular-pipes

[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' },
  ];