How to sort dropdown values in alphabetical order in mat angular

Question

As per Angular documentation, there is no orderBy pipe available to sort. As per the documentation I have to implement the sort in the component by myself. As I am very new to Angular, I am unsure, how to go about it. Can somebody please help out? I am looking for the actual code, which will do the trick.

I want to sort issuer dropdown in an ascending order. ts file is as follows

import { Component, OnInit } from '@angular/core';
import { IssuerDropdownService } from './service/issuer-dropdown.service';
import { DisputeDataSessionService } from 'src/app/service/dispute.session.service'

@Component({
  selector: 'app-issuer-dropdown',
  templateUrl: './issuer-dropdown.component.html',
  styleUrls: ['./issuer-dropdown.component.scss']
})
export class IssuerDropdownComponent implements OnInit {

  constructor(public issuerService: IssuerDropdownService, public session: DisputeDataSessionService) { }
  issuerList: any = [];

  ngOnInit(): void {
    this.issuerService.getIssuerList().subscribe(res => {
      this.issuerList=res.data;
    })

  }

  selectIssuer(issuer) {
    this.issuerService.issuer = issuer.issuerName;
    this.session.setSubscriberId(issuer.subscriberId);
    this.session.setCountryCode(issuer.issuerCountryCode);
  }

}

<mat-form-field appearance="outline" >
  <mat-label translate>Issuer</mat-label>
  <mat-select placeholder="Choose an Issuer"  [(ngModel)]="this.issuerService.issuer" class="issuerSelectPanel">
    <mat-option (click)="selectIssuer(issuer)" *ngFor="let issuer of issuerList" [value]="issuer.issuerName" >{{ issuer.issuerName }}</mat-option>
  </mat-select>             
</mat-form-field>

You can use `this.issuerList=res.data.sort();`. But make sure that this doesn't contain a data starting with numbers. — Mahesh, Feb 28 '22 at 05:17
[This is a good solution](https://stackoverflow.com/a/44511274/5465670). Make sure to inject the pipe into your app component — Don, Feb 28 '22 at 05:34

score 0 · Answer 1 · answered Feb 28 '22 at 05:23

0

You need to sort your data when you assign it to your issuerList.

function sortByName(a: any, b: any) {
  var nameA = a.issuerName.toUpperCase(); // ignore upper and lowercase
  var nameB = b.issuerName.toUpperCase(); // ignore upper and lowercase
  if (nameA < nameB) {
    return -1;
  }
  if (nameA > nameB) {
    return 1;
  }

  // names must be equal
  return 0;
}


this.issuerService.getIssuerList().subscribe(res => {
   this.issuerList = res.data.sort(this.sortByName);
})

Javascript working example:

function sortByName(a, b) {
      var nameA = a.issuerName.toUpperCase(); // ignore upper and lowercase
      var nameB = b.issuerName.toUpperCase(); // ignore upper and lowercase
      if (nameA < nameB) {
        return -1;
      }
      if (nameA > nameB) {
        return 1;
      }

      // names must be equal
      return 0;
}

var someList = [{issuerName: "John"}, {issuerName: "Jane"}, {issuerName: "bob"}];
someList.sort(sortByName);
console.log(someList);

See: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort

answered Feb 28 '22 at 05:23

Zze

18,229
13
85
118

How can I set one particular drop-down option as first irrespective of this sort function. – Doodles Feb 28 '22 at 06:33
@Doodles Well it depends what you want it to be... if that particular option is a part of your `res.data` then you need to put an extra property like `sortOrder` or something for each item in the list. If you want an option like "Select an Option", then just add it manually in your html before your other options like: `Select an Option {{ issuer.issuerName }}` – Zze Feb 28 '22 at 06:43
can i change this 'sort' function in such a way that particular option which should be appeared as first will get sliced from array and remaining array will get sort as it is. – Doodles Feb 28 '22 at 13:54
@Doodles I would recommend against doing that in the sort function. Make it 2 steps - 1, sort the data. 2, find the one you want first from the array and move it to the front of the array. – Zze Feb 28 '22 at 21:43

How to sort dropdown values in alphabetical order in mat angular

1 Answers1