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

Ankit Sharma · Accepted Answer · 2018-08-07 07:13:17Z

2

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.

answered Aug 7, 2018 at 7:13

Ankit Sharma

1,70410 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

score 0 · Accepted Answer · 2018-08-07 07:30:31Z

0

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()
}

edited Aug 7, 2018 at 7:30

answered Aug 7, 2018 at 7:23

user10186247

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related