Angular 8 Pipes

Pipes are a useful feature in Angular. These are the simple way to transform values in an Angular template. It takes the integers, strings, array, and dates as input separated with | to be converted in the format as required and display same as an in the browser. 

Inside the interpolation expression, we define the pipe and use it based on the situation because there are many types of pipes. We can use in our angular applications.

A pipe holds in data as input and transforming it into the desired output. Some values benefit for a bit of editing. We may notice that we want many of the same transformations repeatedly, both within and across many applications.

We can almost think of them as styles, and In fact, we might like to apply them in our HTML templates.

Syntax:

{{title | uppercase}}

See an example of the pipe; previously, we display the title text in upper and lower case with the help of pipes.

Example:

Define a variable named "title" in the component.ts file.

Import {Component} from ‘@angular/core’;
@Component ({
selector: ‘app-root’,
templateUrl: ‘.app.component.html’,
styleUrls: [‘./app.component.css’]
}]
title=’my-first-app’;
} 

 here, we are using the pipe symbol in component.html file:

{{ title | uppercase}} 



{{ title | lowercase }} 

 

Run ng serve and see the result. You will see the following result. We can see that pipes have changed the title in upper and lowercase.

Built-in Angular pipes

Angular has a stock of pipes such as Date Pipe, Uppercase Pipe, Lowercase Pipe, currency pipe, and percent pipe. They are available for use in any angular template. Angular doesn't have the Filter Pipe or any Orderbypipe. Angular doesn't provide the pipes for filtering and sorting the lists. Pipes are an excellent way to encapsulate and share a collective display-value transformation.

• AsyncPipe
• Currencypipe
• Datapipe
• Decimalpipe
• Jsonpipe
• Percentpipe
• Lower case pipe
• Upper case pipe
• Slicepipe
• Title case pipe

Parameterizing a pipe in Angular 8

We can also move a parameter to the pipe; we can use the HTML code to pass the parameter.

app.component.html

Rohan’s birthday is {{ birthday | date:”dd/mm/yyyy”}}
 

Chaining pipes

We can chain pipes together and creates useful combinations and also can use the lowercase and upper case pipe in our example.

app.component.html

Rohan’s birthday is {{birthday | date | uppercase}}
 

Now, our date is in upper case letter.

Pure and Impure pipes

There are two categories of pipes:

1. Pure
2. Impure

By default, pipes of angular are pure. Every pipe we have seen are pure and built-in pipes. We can make the pipe impure by setting the pure flag into false.

Pure pipes

Angular executes the pure pipe only when if it detects the perfect  change in the input value. The real difference is either in the shift to the primitive input value (Number, Boolean, Symbol, String) or a changed object reference (Array, Function, Object, Date).

Impure pipes

Angular executes the corrupted pipe during every component change detection cycle. The impure pipe is called often every keystroke or mouse-move.

How to Create a Custom Angular Pipe?

To create a custom pipe, we create a new ts file and use the code according to work, and we have to import Pipe, Pipe Transform from Angular/Core.

Create a sqrt custom pipe.

component.ts file:

import {Pipe, PipeTransform} from
‘@angular/core’;
@Pipe ({
name: ‘sqrt’
})
Export class SqrtPipe implements PipeTransform {
transform (val: number) : number{
Return Math.sqrt(val);
}
}  

We have to make changes in the app.module.ts. Create a class named as SqrtPipe.

This class will implement PipeTransform. The transform method defined in the class can take arguments as the number and will return the number after taking the square root.

We have to add the same code in app.module.ts file

module.ts file:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { NewCmpComponent } from './new-cmp/new-cmp.component';
import { ChangeTextDirective } from './change-text.directive';
import { SqrtPipe } from './app.sqrt';
@NgModule({
declarations: [
SqrtPipe,
AppComponent,
NewCmpComponent,
ChangeTextDirective
],
imports: [
BrowserModule
],
providers: [],
AppComponent]
})
export class AppModule {
}

Now, use sqrt pipe in the component.html file.

component.html file:

Example of Custom Pipe
Square root of 225 is: {{225 | sqrt}} 


Square root of 164 is: {{164 | sqrt}} 

 

Output: