In this post you will learn how to create custom pipe in angular. When you need some data formatting which can not be done by using angular built-in pipes then we need to create custom pipe. 

Steps

• Create pipe
• Register the pipe in module
• Use pipe in view

Step 1 create pipe :

There are two ways to generate a pipe file in angular.

Way 1 :

We can use ng generate command to generate pipe

ng generate pipe pipeName

Way 2 :

Create a typeScript file with the name description.pipe.ts . In the file we need to import two types Pipe and PipeTransform form @angular/core  .

Pipe : is decorator function which converts normal typeScript class into a pipe.

PipeTransform : is interface which defines the shape of the pipe.

For example in your application you show a card, contains title and description  and you don't what to display the complete description instead you want to show few words of the description.

src/app/description.pipe.ts

import { Pipe , PipeTransform } from "@angular/core";

@Pipe({
    name:'description' // name of the pipe
})

export class DescriptionPipe implements PipeTransform{
    transform(value:string , lengthOfString:number){
        /* if no value comes to the pipe it will return null */
        if(!value){
            return null;
        }
        else{
        /* 
           if value then check the argument which is lengthOfString 
           if no lengthOfString then it will set 50 as default
        */
        let descriptionLength = lengthOfString ? lengthOfString : 50;
        /* 
           Return the formatted value. 
        */
        return value.substr(0,descriptionLength)+'...';
        }
    }
}

Step 2 register the pipe in module :

If we are creating a component to let the angular know about the component we need to register the component in app.module root module file, the same applies for the pipe , the custom pipe which you have created angular doesn't know about it , to let the angular know you have to register it in app.module

Import the DescriptionPipe pipe class in app.module and declare it in declaration array.

src/app/app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { DescriptionPipe } from './description.pipe';

@NgModule({
  declarations: [
    AppComponent,
    DescriptionPipe
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 3 use the pipe in view : 

Once the pipe is created and registered in the module now we can use it .

src/app/app.component.html

<div class="card">
    <h5>{{title}}</h5>
    <p>{{description | description:130}}</p>
    <!-- {{Value | PipeName:lengthOfString}} -->
</div>

src/app/app.component.ts

import { Component} from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent{
 public title="Lorem Ipsum text codetutorialpoint example";
 public description=`Lorem Ipsum  is simply dummy text of the printing
  and typesetting industry. Lorem Ipsum has been the industry's standard 
  dummy text ever since the 1500s, when an unknown printer took a galley 
  of type and scrambled it to make a type specimen book. It has survived 
  not only five centuries`;
}

Output :

I hope this article is helpful for you , i am very glad to help you thanks for reading