how to selectively sort elements in a array using angular pipes in html

Question

<ng-container *ngFor="let hazard of hazardInfo | getObjectKeys">
        <nova-accordion-item *ngIf="hazardInfo[hazard].length" 
         [isActive]="true">
          <div accordion-item-head fxLayoutWrap>
            <div novaTrunc fxFlex="100" fxFlex.sm="100">
              <nova-icon-text *ngIf="hazard === 'assetHazards'" 
             [icon]="'icon-triangles_three'" [text]=" 
  ('details.assetHazards'|sgTranslatePipe) +' ( 
                  '+hazardInfo.assetHazards.length+' )'"></nova-icon-text>
              <nova-icon-text *ngIf="hazard === 'propertyHazards'" 
         [icon]="'icon-office'" [text]=" 
     ('details.propertyHazards'|sgTranslatePipe) +' ( 
   '+hazardInfo.propertyHazards.length+' )'"></nova-icon-text>
              <nova-icon-text *ngIf="hazard === 'spaceHazards'" [icon]="'icon-square_opening'" [text]="('details.spaceHazards'|sgTranslatePipe) +' ( '+hazardInfo.spaceHazards.length+' )'"></nova-icon-text>
            </div>
          </div>
          <div accordion-item-body fxLayoutWrap>
            <workorder-ehs-hazard-table fxFlexFill [data]="hazardInfo[hazard]"></workorder-ehs-hazard-table>
          </div>
        </nova-accordion-item>
      </ng-container>



public getOrderType(): string {
    if (this.selectedOrder.assets && this.selectedOrder.assets.length) {
      return 'asset';
    } else if (this.selectedOrder.property && (this.selectedOrder.space && 
      this.selectedOrder.space.hasOwnProperty('id'))) {
      return 'space';
    } else if (this.selectedOrder.property) {
      return 'property';
    }
  }

I have 3 types of order which is decided by the set of conditions , the list is ordered as below Asset order: Asset, Space, Property |

Space order: Space, Asset, Property |

Property order: Property, Space, Assets |

How to achieve this using pipes or any other efficient way

Answer 1

It is not advisable to sort using Angular pipes. Angular.js (v1) used to have an orderBy filter which the Angular team removed in version 2 onwards. For reference, you may check out the link here.

To achieve such functionality, you can use sort function and write your own comparator function inside your .ts file.

Or else, you may also use lodash 's sortBy function to sort depending on the key provided. Check the documentation here . For example, sorting users based on user and age.

_.sortBy(users, ['user', 'age']);

Hope it helps.

Answer 2

You can inject the pipe into your component. Then you can call them whenever the dataset changes, for example in a ngOnChanges()-Lifecycle hook.

public constructor(
  private assetPipe AssetPipe,
  private spacePipe SpacePipe,
  private propertyPipe PropertyPipe
){}


public reorder(){
  switch(this.getOrderType()){
    case 'asset':
      this.hazardInfo = this.assetPipe.transform(this.hazardInfo)
      this.hazardInfo = this.spacePipe.transform(this.hazardInfo)
      this.hazardInfo = this.propertyPipe.transform(this.hazardInfo)
      break
    case 'space':
      ...
    case 'property':
      ...
  }
}


public ngOnChanges(){
  this.reorder()
}