While working with Angular, The situation occurs many times to change the format of the data we are trying to show in HTML template. There are some in-built pipes provided by angular itself like below:
- DatePipe (for parsing Date objects)
- UpperCasePipe (for uppercase-ing Strings)
- LowerCasePipe (for lowercase-ing Strings)
- CurrencyPipe (for formatting currencies)
- AsyncPipe (for unwrapping asynchronous values, such as Observables!)
Apart from the in-built pipes, Custom pipes can also be created to achieve any specific requirement.
Here I am going to explain one example to show you how a custom pipe can be created. Here we will use the created pipe to reverse any number.
Let's Get Started.
Step 1: Create pipe(a file named reverse-string.pipe.ts)
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({name: 'reverseString'})
export class ReverseString implements PipeTransform {
transform(value: string): string {
let newStr: string = "";
for (var i = value.length - 1; i >= 0; i--) {
newStr += value.charAt(i);
}
return newStr;
}
}
Step 2: Add this pipe in app.module.ts file.
import { ReverseStr } from './reverse-string.pipe.ts';
.......
......
@NgModule({
declarations: [
........,
ReverseStr,
.......
],
......
......
})
Step 3: Use the pipe in template
item.first_name | ReverseString
Pipe with Multi arguments
In any case we want to append/ or add deduct some value from the available data then multiple arguments can also be passed using below way:
myData | date:'fullDate':'arg1':'arg2'
export class DatePipe implements PipeTransform {
transform(value:any, arg1:any, arg2:any):any {
...
}
Interested to find more blogs on Angular, Read at https://jsonworld.com/blog