CODEWITHSUNDEEP
angularsorting
Paramar
Paramar

Reputation: 307

Ordering a drop down alphabetically angular

            <div class="form-group" *jhiHasAnyAuthority="['ROLE_ADMIN']">
                <label class="form-control-label" jhiTranslate="ManagementApp.project.lab" for="field_leader">Add Lab</label>
                <select class="form-control" id="field_lab" name="lab">
                    <option [ngValue]="null"></option>
                    <option *ngFor="let lab of labs;" (click)="addLab(lab)">{{lab.labCode}}</option>
                </select>
            </div>

I am maintaining some angular code with zero prior experience.

I am trying to create an alphabetically sorted dropdown. I tried to imitate this load drop down values alphabetic order angular 6 , but without success.

I have tried "let lab of labs| orderBy: 'lab.labCode';"

and "let lab of labs.sort();" as labs has a sort function already.

The sort function prototype is sort(compareFn?: (a: T, b: T) => number): this; with:

Sorts an array. * @param compareFn The name of the function used to determine the order of the elements. If omitted, the elements are sorted in ascending, ASCII character order.

The lab as you can see has a labCode (string), which needs to be used for the sorting.

Any help would be greatly appreciated.

----EDITS--------- Contents of labs array: enter image description here

Upvotes: 1

Views: 10157

Answers (3)

prasad07
prasad07

Reputation: 211

Below code can be added in component's ngOnInit() or in your API call success to sort alphabetically

labs.sort((a, b) => a.labCode.localeCompare(b.labCode));

Hope this helps.

Upvotes: 1

BELLIL
BELLIL

Reputation: 765

You can sort you array in ngOnInit()

 sorted : []
 ngOnInit(): void {

    this.sorted = labs.sort((a, b) => a.labCode> b.labCode? 1 : -1);
  }

in your html use sorted insted of labs

Upvotes: 0

user26258
user26258

Reputation: 11

There is no örderBy pipe in higher versions of angular. You have to write a pipe as given in the example - https://medium.com/@mohammad.nicoll/sort-pipe-in-angular-6-7-f22475cc4054 and apply the same.

Upvotes: 0

Related Questions