How to create pipe in Angular?

Question

In Angular, how can I create pipe and apply sort.

I don't know how to create. Can any one give me any guidance on this?

<div *ngFor="let item of data | keyvalue">
     <div *ngFor='let obj of item.value;  index as i'>
                 {{ obj.curdate }}
         {{ obj.time }}
     </div>
 </div>

I saw a lot of answers on this subject.

But I don't know where to create this file and how to call in my component.

Can suggest step by step tutorial on this.

I tried this,

pipe/orderBy.pipe.ts

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

@Pipe({
  name: "sort"
})
export class ArraySortPipe  implements PipeTransform {
  transform(array: any, field: string): any[] {
    if (!Array.isArray(array)) {
      return;
    }
    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;
  }
}

in app.module.ts

import { ArraySortPipe } from './pipe/orderBy.pipe';

@NgModule({
    declarations: [
        ArraySortPipe
    ],

mycomponent.ts

import { ArraySortPipe } from '../../../pipe/orderBy.pipe';

mytemplate

<th *ngFor="let obj of item.value;  index as i | sort: 'obj.curdate'">{{obj.curdate}}</th>

I followed above method but i got an error.

compiler.js:2547 Uncaught Error: Template parse errors: TypeError: Cannot read property 'toUpperCase' of undefined (" ]*ngFor="let obj of item.value; index as i | sort: 'obj.curdate'">{{obj.curdate}}

To me it is a bit unclear what you want. Also can you show us what you have tried or what you have tried searching for? — Martijn Vissers
well i am not start yet because i don't know where to create pip function under which folder and how to call on this — my Test
angular.io/guide/pipes#custom-pipes It's well documented, try something first ;) — lovis91

dquijada dquijada · Accepted Answer · 2019-01-29T15:44:37

I imagine you mean a pipe.

This tutorial is pretty good imho, it should help you.

Some extracts:

Create your pipe:

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

@Pipe({ name: 'filesize' })
export class FileSizePipe {}

Declare it on your NgModules

import { FileSizePipe } from './filesize.pipe';

@NgModule({
  declarations: [
    //...
    FileSizePipe,
  ],
})
export class AppModule {}

Implement PipeTransform

export class FileSizePipe implements PipeTransform {
  transform(size: number): string {
    return (size / (1024 * 1024)).toFixed(2) + 'MB';
  }
}

And then just use it

<p>{{ file.size | filesize }}</p>

The tutorial has a lot more of details, and I can help you if you have some doubts too.

EDIT: Also you can see the official guide, that has a lot of details.

How to create pipe in Angular?

2 Answers