Angular Pipes:

Have a goot flight through reading this story, that you’ll land with essentials of this documentation 😊.

Introduction

Angular pipes is a feature used to transform output in the template.

We have angular built-in pipes and we can create our own custom pipes.

Built-in pipes

Angular provides built-in pipe for typical data transformations, including transformations for internationalization (i18n), which use locale information to format data. The following are commonly used built-in pipes for data formatting:

• DatePipe: Formats a date value according to locale rules.
• 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.
• DecimalPipe: Transforms a number into a string with a decimal point, formatted according to locale rules.
• PercentPipe: Transforms a number to a percentage string, formatted according to locale rules.

A complete reference for built-in pipes could be find here

Below is an example of upperCasePipe:

@Component({
    selector: 'app-todo',
    template: `<p>{{ userName | uppercase}}</p>`,
})
export class AppTodoComponent {
  userName = 'capilate';
}

The output is: CAPITALE

Parametrizing a Pipe:

In Angular Pipes , we can set parameters in a pipe, as shown in the datePipe below:

In ts, we have a variable userDate = new Date();

In the HTML, to disaply full date, we use the pipe date:

@Component({
    selector: 'app-todo',
    template: `<p>{{ userDate | date: 'fullDate' }}</p>`,
})
export class AppTodoComponent {
  userDate = new Date();
}

The output is:

Monday, July 12, 2021

Chaining Pipes:

We can have multiples pipes for 1 output, following the 2 examples above , we can do:

In the HTML:

<p>{{ userDate | date: 'fullDate' | uppercase }}</p>

The output is:

MONDAY, JULY 12, 2021

Custom pipes:

In Angular, we can create our own custom pipes according to our needs:

Below is an example of a custom pipe `shorten pipe` which takes a value a truncate the output:

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Pipe({
  name: 'safeHtml',
})
export class SafeHtmlPipe implements PipeTransform {
  constructor(private sanitizer: DomSanitizer) {}

  transform(htmlString: string) {
    return this.sanitizer.bypassSecurityTrustHtml(htmlString);
  }
}

we should add it in our module’s declaration:

import {NgModule} from '@angular/core';
import {SafeHtmlPipe} from './safe-html.pipe';

@NgModule({
    imports: [],
    entryComponents: [],
    exports: [SafeHtmlPipe],
    declarations: [SafeHtmlPipe],
    providers: [],
})
export class PipesTransformModule {
}

And in the HTML we would do :

<p>{{ userName | ShortenPipe}}</p>

discover another topic on my Medium ✍ https://medium.com/@sophieelsa