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