Angular orderBy Pipe
Angular Pipes are a way to transform the format of output data for display. The data can be strings, currency amounts, dates, etc. In this article, we will learn How to use orderBy in Angular pipe. The orderBy is used with a dependency called lodash. We will implement a pipe to achieve the desired result.
Steps for Installing & Configuring the Angular Application
Step 1: Create an Angular application using the following command.
ng new appname
Step 2: After creating your project folder i.e. appname, move to it using the following command.
cd appname
Step 3: Create a pipe, go to src/app
ng generate pipe geek
Step 4: Install Dependency
npm i --save-dev @types/lodash
Project Structure
It will look like the following:
Example 1: In this example, we will learn how to use orderBy to display the values in ascending order.
HTML
<!-- app.component.html --> < h2 style = "color: green" >w3wiki</ h2 > < h2 >Angular orderBy pipe</ h2 > < div * ngFor = "let item of gfg | orderBy: 'cost'" > {{item.course}} : {{ item.cost}} </ div > |
Javascript
// app.component.ts import { Component, OnInit } from '@angular/core' ; import { KeyValue } from '@angular/common' ; import { Pipe, PipeTransform } from '@angular/core' ; @Component({ selector: 'app-root' , templateUrl: "./app.component.html" , styleUrls: [ './app.component.css' ] }) export class AppComponent { gfg = [ { course: "HTML " , cost: "2100" }, { course: "CSS" , cost: "1800" }, { course: "XML" , cost: "1900" }, { course: "Angular " , cost: "1700" }, { course: "React " , cost: "1600" } ] } |
Javascript
// app.module.ts import { NgModule } from '@angular/core' ; import { BrowserModule } from '@angular/platform-browser' ; import { HttpClientModule } from '@angular/common/http' ; import { AppComponent } from './app.component' ; import { GeekPipe } from './geek.pipe' ; @NgModule({ declarations: [ AppComponent, GeekPipe ], imports: [ BrowserModule, HttpClientModule, ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } |
Javascript
// geek.pipe.ts import { Pipe, PipeTransform } from "@angular/core" ; import { orderBy } from 'lodash' ; @Pipe({ name: "orderBy" }) export class GeekPipe implements PipeTransform { transform(array: any, arg2: any): any[] { return orderBy(array, "cost" , 'asc' ); } } |
Output:
Example 2: In this example, we will learn how to use orderBy to display the values in descending order.
HTML
<!-- app.component.html --> < h2 style = "color: green" >w3wiki</ h2 > < h2 >Angular orderBy pipe</ h2 > < div * ngFor = "let item of gfg | orderBy: 'cost'" > {{item.course}} : {{ item.cost}} </ div > |
Javascript
// app.component.ts import { Component, OnInit } from '@angular/core' ; import { KeyValue } from '@angular/common' ; import { Pipe, PipeTransform } from '@angular/core' ; @Component({ selector: 'app-root' , templateUrl: "./app.component.html" , styleUrls: [ './app.component.css' ] }) export class AppComponent { gfg = [ { course: "HTML " , cost: "2100" }, { course: "CSS" , cost: "1800" }, { course: "XML" , cost: "1900" }, { course: "Angular " , cost: "1700" }, { course: "React " , cost: "1600" } ] } |
Javascript
// app.module.ts import { NgModule } from '@angular/core' ; import { BrowserModule } from '@angular/platform-browser' ; import { HttpClientModule } from '@angular/common/http' ; import { AppComponent } from './app.component' ; import { GeekPipe } from './geek.pipe' ; @NgModule({ declarations: [ AppComponent, GeekPipe ], imports: [ BrowserModule, HttpClientModule, ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } |
Javascript
// geek.pipe.ts import { Pipe, PipeTransform } from "@angular/core" ; import { orderBy } from 'lodash' ; @Pipe({ name: "orderBy" }) export class GeekPipe implements PipeTransform { transform(array: any, arg2: any): any[] { return orderBy(array, "cost" , 'desc' ); } } |
Output:
Contact Us