Angular7 Pipes

Angular7 Pipes

We'll talk about Pipes in Angular 7 in this chapter. Pipes were earlier called Angular1 filters, and were called Angular2 pipes.

The character is used for the transformation of data. The syntax fits with the same –

{{ Welcome to Angular 7 | lowercase}}

It takes integers, strings, arrays, and date as separate input with to be converted as required into the format and display the same in the browser.

Let us consider the use of pipes for a few examples. We want the text given to uppercase to be displayed here. This can be achieved using the following pipes −

We have defined the title variable in the app.component.ts file as follows –

import { Component } from '@angular/core';
@Component({ 
   selector: 'app-root', 
   templateUrl: './app.component.html', 
   styleUrls: ['./app.component.css'] 
}) 
export class AppComponent {
   title = 'This is my First Angular 7 Project!'; 
}

The following line of code goes into the app.component.html file −

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

Some built-in pipes with an angular are available here-

Lowercasepipe

Uppercasepipe

Datepipe

Currencypipe

Jsonpipe

Percentpipe

Decimalpipe

Slicepipe

We've seen lowercase and uppercase pipes before. Let's see how the other pipes work now. The following line of code will help us identify the variables included in app.component.ts file –

import { Component } from '@angular/core';
@Component({ 
   selector: 'app-root',
   templateUrl: './app.component.html', 
   styleUrls: ['./app.component.css'] 
})
export class AppComponent {
   title = 'This is my First Angular 7 Project!'; 
   todaydate = new Date(); 
   jsonval = {name:'Phptpoint', age:'30', address:{a1:'Noida', a2:'UP'}}; 
   months = ["Jan", "Feb", "Mar", "April", "May", "Jun", "July", "Aug", 
      "Sept", "Oct", "Nov", "Dec"]; 
}

As shown below we will use the pipes in app.component.html file-

<!--The content below is only a placeholder and can be replaced.--> 
<div style = "width:100%;"> 
   <div style = "width:40%;float:left;border:solid 1px black;"> 
      <h1>Uppercase Pipe</h1> 
      <b>{{title | uppercase}}</b>
      <br/> 
      
      <h1>Lowercase Pipe</h1> 
      <b>{{title | lowercase}}</b> 
      <h1>Currency Pipe</h1> 
      <b>{{6589.23 | currency:"USD"}}</b>
      <br/> 
      
      <b>{{6589.23 | currency:"USD":true}}</b> 
      // Boolean true is used to get the sign of the currency. 
      <h1>Date pipe</h1> 
      <b>{{todaydate | date:'d/M/y'}}</b>
      <br/> 
      
      <b>{{todaydate | date:'shortTime'}}</b> 
      <h1>Decimal Pipe</h1> 
      <b>{{ 454.78787814 | number: '3.4-4' }}</b> 
      // 3 is for main integer, 4 -4 are for integers to be displayed. 
   </div> 
   
   <div style = "width:40%;float:left;border:solid 1px black;"< 
      <h1<Json Pipe</h1> 
      <b>{{ jsonval | json }}</b>
      <h1>Percent Pipe</h1> 
      <b>{{00.54565 | percent}}</b> 
      <h1>Slice Pipe</h1> 
      <b>{{months | slice:2:6}}</b> 
      // here 2 and 6 refers to the start and the end index 
   </div> 
</div>

How to Create a Custom Pipe?

We created a new ts-file to create a custom pipe. We want to create custom sqrt pipe here. We have provided the same file name and it looks like this –

import {Pipe, PipeTransform} from '@angular/core'; 
@Pipe ({ 
   name : 'sqrt'
}) 
export class SqrtPipe implements PipeTransform {
   transform(val : number) : number {
      return Math.sqrt(val);
   }
}

We need to import the Pipe and Pipe Transform from Angular / Core to create a custom pipe. We have to give our pipe the name in the @Pipe directive, which is to be included in our.html file. We 're creating the sqrt pipe, and we're going to name it sqrt.

We must create the class as we proceed further, and the class name is SqrtPipe. This class will get the PipeTransform implemented.

The transform method defined in the class will take argument as number and return the number after the square root has been taken.

Since we have created a new file, in app.module.ts, we must add the same. This works as follows –

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module'; 
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, 
      AppRoutingModule
   ], 
   providers: [], 
   bootstrap: [AppComponent] 
}) 
export class AppModule { }

We have created the app.sqrt.ts class. We have to import the same in app.module.ts and define the path of the file. As shown above it must also be included in the declarations.

Let us now see in the app.component.html file the call made to the sqrt pipe.

<h1>Custom Pipe Example 1</h1> 
<b>Square root of 16 is: {{16 | sqrt}}</b> 
<br/> 
<b>Square root of 64 is: {{64 | sqrt}}</b>