Quick Contact


    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 displays the same as 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 it in our angular applications.

    A pipe holds in data as input and transforming it into the desired output. Some values benefit from 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.

    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:

    	< h1>
    	{{ title | uppercase}} < br>
    	< /h1>
    	< h1>
    	{{ title | lowercase }} < br>
    	< /h1>
    	

    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
    
    	< h1>
    	Arpit’s birthday is {{ birthday | date:”dd/mm/yyyy”}}
    	< /h1>
    	
    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
    
    	< h1>
    	Rohan’s birthday is {{birthday | date | uppercase}}
    	< /h1>
    	

    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:
    
    	< h1>Example of Custom Pipe< /h1>
    	< h2>Square root of 225 is: {{225 | sqrt}} < /h2>< br>
    	< h2>Square root of 164 is: {{164 | sqrt}} < /h2>< br>
    	
    Output:

    Copyright 1999- Ducat Creative, All rights reserved.