[Fixed] order by label in pipe RxJS Angular

Issue

I have an observable which I use in html with async pipe and I want to sort it by label at first, but don’t understand how to do it correctly inside pipe. Label could be one of this 'High', 'Medium', 'Low', and also there is always first object with empty label, I should leave it on first place as it is, so if I receive array like this:

[
  {name: 'ALWAYS FIRST', label: ''},
  {name: 'test1', label: 'High'},
  {name: 'test2', label: 'Low'},
  {name: 'test3', label: 'Medium'},
  {name: 'test4', label: 'High'}, 
  ...
]

I need to sort it like this

[
  {name: 'ALWAYS FIRST', label: ''},
  {name: 'test1', label: 'High'},
  {name: 'test4', label: 'High'}, 
  {name: 'test3', label: 'Medium'},
  {name: 'test2', label: 'Low'},
  ...
]

Here’s my code

html

<div *ngIf="photos$ | async as photos">
  <div *ngFor="let photo of photos" class="photo-item">
    {{photo.name}}
  </div>
</div>

ts

photos$: Observable<Photos[]>;

ngOnInit() {
  this.photos$ = this.store.select(selectPhotos)
    .pipe(
      ?
    );
}

Would be grateful for any help!

Solution

You don’t need pipe actually to solve that, you could operate on the array itself in the subscribe. Or in map() to transform the entire data inside the pipe() function.

Here’s a quick example:
https://stackblitz.com/edit/angular-ivy-dvs3j2?file=src%2Fapp%2Fapp.component.ts