Pipes In Angular

Hi readers! Glad to have you as a part of my learning journey! Today is the fourth week and we are learning Pipes in Angular. The articles are a part of my "Getting Started With Angular" series. If you are a newbie like me, I hope to help you a little with this series.

Pipes is a common term right? What does it mean? How does it work? Will get to the answers right away!

What is a Pipe?

Angular pipes are functions, which takes input and transform it to the desired output. Use pipes to transform strings, dates, and other data for display. One major advantage of pipes is, it can be used throughout the application, by declaring it only once.

It can be used in:

1. Showing dates in any preferred format.
2. Displaying data in lowercase or uppercase and more

Built-In Pipes

Angular provides many built-in pipes for various transformations such as:

• UpperCasePipe - Transforms text to all upper case.
• LowerCasePipe - Transforms text to all lower case.
• CurrencyPipe - Transforms a number to a currency string, formatted according to locale rules.
• PercentPipe - Transforms a number to a percentage string, formatted according to locale rules.
• DatePipe - Formats a date value according to locale rules.
• DecimalPipe - Transforms a number into a string with a decimal point, formatted according to locale rules.

Using Pipe in a Template

To apply Pipe, we used the | character, as shown in the code below:

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

@Component({
  selector: 'app-friend-birthday',
  template: "<p>The friend's birthday is {{ birthday | date }}</p>"
})
export class FriendBirthdayComponent {
  birthday = new Date(1999, 3, 23); // April 23, 1999 -- since month parameter is zero-based
}

The component's birthday value flows through the pipe operator, | to the date function and the output is: April 23, 1999.

Example of using another built-in pipe:

import { Component, OnInit } from ‘@angular/core’;
@Component({
selector: ‘app-root’,
template: `{{productName | uppercase}}`
})
export class AppComponent {
productName = ‘Hello World’;
}

The output is: HELLO WORLD

Custom Pipes

Create custom pipes to encapsulate transformations that are not provided with the built-in pipes. Then, use your custom pipe in template expressions, the same way you use built-in pipes —to transform input values to output values for display.

To create a custom pipe, you need to follow these steps:

1. Create a class.
2. Implement PipeTransform in the class.
3. Implement transform function.

Example: Creating a custom pipe that will capitalize first letter of each words in a string.

import { Pipe, PipeTransform } from ‘@angular/core’;
@Pipe({ name: ‘firstcharuppercase’ })
export class FirstCharUpperCase implements
PipeTransform {
transform(value: string, args: string[]): any {
if (!value) {
return value;
}

Pipes 61
return value.replace(/\w\S*/g, function (str) {
return str.charAt(0).toUpperCase() + str.
substr(1).toLowerCase();
});
}
}

Applying the custom pipe in our code:

import { Component, OnInit } from ‘@angular/core’;
@Component({
selector: ‘app-root’,
template: `
<ul *ngFor=’let n of names’>
<li>{{n.name | firstcharuppercase}}</li>
</ul>
`
})
export class AppComponent {
names = [];
constructor() {
this.names = this.getNames();
}
getNames() {
return 
{ ‘name’: ‘haimantika’ },
{ ‘name’: ‘alex’ },
}
}

The output will be: Haimantika

Ending Notes

At the end of this article, you will have a clear concept on pipes, and how to use them on your code.

For any questions or suggestions, drop them on the comment below or reach out to me @Haimantika.