Angular 6 Pipes

Angular 6 Pipes

We'll explore what are Pipes in Angular 6 in this part. Pipes were earlier called Angular1 filters, which were later renamed Angular 2 pipes.

The character is used for data transformation. The code for the same follows

{{ Welcome to Angular 6 | lowercase}}

It takes integers, arrays, strings, and date as separate input with to be translated as needed into the format and show the same in the browser.

Let's find a set of instances utilizing pipes.

We want the text given to uppercase to be displayed here. This can be done using the following pipes −

We specified the title variable − in app.component.ts file

app.component.ts

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

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

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

Angular 6 comes with several built-in pipes. The pipes listed below are –

We've used lowercase and uppercase pipes before. Let's see how the other pipes function now.

The following line of code will help us identify the variables needed 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 = 'Angular 6 Project!';
   todaydate = new Date();
   jsonval = {name:'Rox', age:'25', address:{a1:'Mumbai', a2:'Karnataka'}};
   months = ["Jan", "Feb", "Mar", "April", "May", "Jun",
            "July", "Aug", "Sept", "Oct", "Nov", "Dec"];
}
 
 

We will use the pipes in the app.component.html file.

 
 <div style = "width:100%;">
   <div style = "width:40%;float:left;border:solid 1px red;">
      <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 build custom sqrt pipe here. We offer the file the same name and it looks like this –

• Lowercasepipe
• Uppercasepipe
• Datepipe
• Currencypipe
• Jsonpipe
• Percentpipe
• Decimalpipe
• Slicepipe
• app.sqrt.ts

   
   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 build a custom pipe. We have to give our pipe the name in the @Pipe order, which is to be included in our.html file. We 're making the sqrt pipe, so we're going to call it sqrt.

  We will build the class as we continue on, and the class name is SqrtPipe. Each section should have the PipeTransform introduced.

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

  Since we have created a new script, in app.module.ts, we will add the same. This works as follows −

   
   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: [],
     bootstrap: [AppComponent]
  })
  export class AppModule { }
   
   

  We built the class App.sqrt.ts. We will import the same in app.module.ts, and define the file path. When mentioned above it must always be used in the declarations.

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

   
   <h1>Custom Pipe</h1>
  <b>Square root of 25 is: {{25 | sqrt}}</b>
  <br/>
  <b>Square root of 729 is: {{729 | sqrt}}</b>