How to Use Custom Pipe in Angular
Before going to know about custom pipes in angular, first we look into what are the pipes in Angular
Pipes in Angular are just like the same function. A function can take arguments and return some new values. Same thing pipes do.
Angular has some built-in pipes with the framework:
- UpperCasePipe (Uppercasing strings)
- LowerCasePipe(Lowercasing strings)
- Datapipe(parsing Date objects)
- CurrecnyPipe(Formatting
Example:
<div>
<p>{{ MyDateString || date: ‘M/d/yy’ }}</p>
</div>
Renders:20/08/2022
The above example renders with the formatted Date. It is a valid use of Pipes! Now, move to custom pipes in angular
Custom Pipes in Angular
Pipes in angular transform single value, into new values. These values can be anything like, arrays, objects, strings etc.
For the demonstration of pipes, we converting numeric file sizes into more readable formats, such as “2.5MB” instead of “2120109”. But first, let’s start with the basics – how to use the Pipe.
Using Custom Pipes
Let’s take example image was just uploaded via a drag and drop zone – and we getting some of the information from it. simplified file object we’ll work with:
export class FilesComponent {
file = { name: ‘abclogo.svg’, size: 2120109, type: ‘image/svg’ };
}
Let’s take a quick example for how we define the usage of our pipe, which is convert numbers into file sizes
<div>
<p>{{ file.name }}</p>
<p>{{ file.size | filesize }}</p>
</div>
How to create a Custom Pipe
First we need create a class. We’ll call this our FileSizePipe, as essentially transforming a numeric value into string values that’s more human readable
export class FileSizePipe {}
Now we have the setup, we have to name our Pipe. In the HTML, we can do like this
<p>{{ file.size | filesize }}</p>
we have to name the pipe “filesize”. This was done via another TypeScript decorator, the @Pipe:
import { Pipe } from ‘@angular/core’;
@Pipe({ name: ‘filesize’ })
export class FileSizePipe {}
we have to do is supply a “name” property that corresponds to template code name as well Don’t forget to register the Pipe in your @NgModule as well, under declarations:
import { FileSizePipe } from ‘./filesize.pipe’;
@NgModule({
declarations: [
//…
FileSizePipe,
],
})
export class AppModule {}
Pipe and Pipe Transform
Once done with class setup, registered, and the @Pipe decorator added – the next step is implementing the Pipe Transform interface:
import { Pipe, PipeTransform } from ‘@angular/core’;
@Pipe({ name: ‘filesize’ })
export class FileSizePipe implements PipeTransform {
transform() {}
}
It is creating a required contract that our FileSizePipe must to the following structure:
export interface PipeTransform {
transform(value: any, …args: any[]): any;
}
Pipe Transform Value
We are using Pipe via interpolation, it is the magic on how we are given arguments in a Pipe
{{ file.size | filesize }}
file.size variable was passed straight through to our transform method, as the first argument.
We call this our size and type it appropriately:
export class FileSizePipe implements PipeTransform {
transform(size: number) {}
}
Here we can implement the logic to convert the numeric value into a readable format of megabytes.
export class FileSizePipe implements PipeTransform {
transform(size: number): string {
return (size / (1024 * 1024)).toFixed(2) + ‘MB’;
}
}
Here we returning a type string as we’re appending ‘MB’ on the end. This will then give below:
{{ file.size | filesize }}
Pipes with Arguments
For our above example, we want to allow to specify the extension slightly differently than advertised.
Before going to hit up the template, just add the capability for an extension
export class FileSizePipe implements PipeTransform {
transform(size: number, extension: string = ‘MB’): string {
return (size / (1024 * 1024)).toFixed(2) + extension;
}
}
we have used a default parameter value instead of appending the ‘MB’ to the end of the string. It allows us to use the default ‘MB’, or override it when we use it. It takes us to completing our next objective of passing an argument into our Pipe:
{{ file.size | filesize:’megabyte’ }}
And all we need to supply an argument to your custom Pipe. In this arguments are simply separated by :, for example:
{{ value | pipe:arg1 }}
{{ value | pipe:arg1:arg2 }}
{{ value | pipe:arg1:arg3 }}
final assembled code:
import { Pipe, PipeTransform } from ‘@angular/core’;
@Pipe({ name: ‘filesize’ })
export class FileSizePipe implements PipeTransform {
transform(size: number, extension: string = ‘MB’) {
return (size / (1024 * 1024)).toFixed(2) + extension;
}
}
Let’s
