Pipes in Angular provide a way to transform data in your templates. In this article, we will show you how to create a custom pipe in Angular.
Step 1: Import the required modules
To start creating a pipe, you need to import two modules, Pipe and PipeTransform, from the @angular/core library. This can be done using the following code:
import {Pipe, PipeTransform} from '@angular/core';Step 2: Name the Pipe
Once you have imported the required modules, you can name the pipe using the @Pipe decorator. The @Pipe decorator accepts an object with a single property, name. The name property is used to specify the name of the pipe, which can then be used in templates.
@Pipe({name: 'truncate'})Step 3: Implement the PipeTransform interface
The next step is to implement the PipeTransform interface, which requires a single method, transform(). The transform() method is where you define the logic for transforming the data.
export class TruncatePipe implements PipeTransform {
transform(value: string) {
return value.split(' ').slice(0, 2).join(' ') + '...';
}
}Step 4: Import the Pipe in the module
To use the pipe, you need to import it in the module where it will be used.
//pipes.module.ts
import { TruncatePipe } from './truncate.pipe';
import { NgModule } from '@angular/core';
const pipes = [TruncatePipe];
@NgModule({
declarations: [...pipes ],
exports: [...pipes],
})
export class PipesModule { }Step 5: Use the Pipe in the target location
Finally, you can use the pipe in the target location in your template using the pipe symbol (|) followed by the name of the pipe.
//target.html
<p>{{text | truncate}}<p>Examples of pipes
Thousand separator converter pipe
import { Pipe, PipeTransform } from '@angular/core';
import isEmpty from 'lodash-es/isEmpty';
import isNumber from 'lodash-es/isNumber';
/**
* @example
* ```html
* <div>{{ 2000 | emptyData }}</div>
* ```
*/
@Pipe({
name: 'emptyData',
})
export class EmptyDataPipe implements PipeTransform {
transform(value: string | number | null | undefined, isPrice = true): any {
if (isNumber(value)) {
if (value === 0 && isPrice) {
return '0.00';
} else {
return value;
}
}
if (isEmpty(value)) {
return '-';
} else {
return value;
}
}
}Order by data pipe
// orderby.pipe.ts
import { Pipe, PipeTransform } from "@angular/core";
import { orderBy } from 'lodash';
@Pipe({
name: "orderBy"
})
export class OrderByPipe implements PipeTransform {
transform(array: any, sortBy: string, order ): any[] {
const sortOrder = order ? order : 'asc'; // setting default ascending order
return orderBy(array, [sortBy], [sortOrder]);
}
}Check empty data pipe
import { Pipe, PipeTransform } from '@angular/core';
import isEmpty from 'lodash-es/isEmpty';
import isNumber from 'lodash-es/isNumber';
/**
* @example
* ```html
* <div>{{ 0 | emptyData }}</div>
* ```
*/
@Pipe({
name: 'emptyData',
})
export class EmptyDataPipe implements PipeTransform {
/**
* @param value - ''
* @returns '-'
*/
transform(value: string | number | null | undefined, isPrice = true): any {
if (isNumber(value)) {
if (value === 0 && isPrice) {
return '0.00';
} else {
return value;
}
}
if (isEmpty(value)) {
return '-';
} else {
return value;
}
}
}In this article, we have shown you how to create a custom pipe in Angular. By following these steps, you can create pipes to transform data in your templates.
