Custom Pipe In Angular

Custom Pipe In Angular

Angular12 17-07-2021 Saheb Sutradhar

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.

Custom pipe in angularsrc/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 :

Custom pipe in angular

 

 

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

 

Related Posts

Card image cap

Angular Material Datepicker Example

Angular12 14-07-2021 Saheb Sutradhar

In this angular material datepicker post i will show you how to use Datepicker in angular app using angular material. ...

Card image cap

Angular Material Sidenav Example

Angular12 14-07-2021 Saheb Sutradhar

In this post you will learn how to implement angular material sidenav , in most of the realtime projects we use sidenav for the application navigation , even in ...

Card image cap

Property binding in angular 12

Angular12 14-07-2021 Saheb Sutradhar

In this post we are going to learn property binding  in angular . Before learning property binding in angular we should know the difference between HTML Attrib ...

Card image cap

Class binding in angular 12

Angular12 15-07-2021 Saheb Sutradhar

In this post we are going to see how we can bind class in angular . Class binding  in angular is very important when you work in a real time project. I have ex ...

Card image cap

Event Binding in Angular 12

Angular12 16-07-2021 Saheb Sutradhar

In this post we are going to learn what is event binding in angular, event binding is most important thing without event binding we can not build an angular app ...

Card image cap

Pipes in Angular 12

Angular12 16-07-2021 Saheb Sutradhar

In angular we use pipes to formate the data, thre are few built in pipes in angular. ...