Angular Pipe for Alphabetical Order Example

By Hardik Savani | February 11, 2021 | Category : Angular


Hi,

In this quick example, let's see angular pipe for alphabetical order. This article goes in detailed on angular pipe orderby alphanumeric. it's simple example of sort by alphabetical order angular pipe. This post will give you simple example of angular pipe sort alphabetically.

you can easily create custom pipe for alphabetical order in angular 7, angular 8, angular 9, angular 10 and angular 11 version.

here, you have to follow few step to create simple example of custom pipe for sorting alphabetical. let's see one by one.

Step 1: Create New App

If you are doing example from scratch then You can easily create your angular app using bellow command:

ng new app-material

Step 2: Create Custom Pipe

We need to run following command to creating pipe in angular application.

ng generate pipe order-by

Now we need to write some logic on our custom pipe ts file. so let's write logic as i written for demo now.

app/order-by.pipe.ts

import { Pipe, PipeTransform } from "@angular/core";

@Pipe({

name: "orderBy"

})

export class OrderByPipe implements PipeTransform {

transform(array: any, field: string): any[] {

array.sort((a: any, b: any) => {

if (a[field] < b[field]) {

return -1;

} else if (a[field] > b[field]) {

return 1;

} else {

return 0;

}

});

return array;

}

now it should be import in module.ts file as bellow:

app/app.module.ts

import { NgModule } from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';

import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';

import { OrderByPipe } from './order-by.pipe';

@NgModule({

imports: [ BrowserModule, FormsModule ],

declarations: [ AppComponent, OrderByPipe ],

bootstrap: [ AppComponent ]

})

export class AppModule { }

Step 3: Use Custom Pipe

Now we need to create one variables and use it, let's add code as like bellow:

app/app.component.ts

import { Component, VERSION } from '@angular/core';

@Component({

selector: 'my-app',

templateUrl: './app.component.html',

styleUrls: [ './app.component.css' ]

})

export class AppComponent {

name = 'Angular ' + VERSION.major;

myarray = [

{name: 'Haresh'},

{name: 'Paresh'},

{name: 'Amit'}

];

}

Ok, now we can use 'nullWithDefault' custom pipe in html file, so let's write it.

app/app.component.html

<h1>angular pipe for alphabetical order - ItSolutionStuff.com</h1>

<ul>

<li *ngFor="let item of myarray | orderBy:'name'"> {{ item.name }} </li>

</ul>

Output:

angular pipe for alphabetical order - ItSolutionStuff.com

Amit

Haresh

Paresh

I hope it can help you...



Tags : Angular


Hardik Savani
My name is Hardik Savani. I'm a full-stack developer, entrepreneur and owner of Aatman Infotech. I live in India and I love to write tutorials and tips that can help to other artisan. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.
Follow Me: Github Twitter
***Do you want me hire for your Project Work? Then Contact US.

We are Recommending you: