Angular Custom Pipes

Hi Guys Today we will learn about custom angular Pipe. It’s is quite easy and simple to implement it inside our Angular Application.

First we will create a simple Pile class anywhere inside our app in angualar.

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

@Pipe({

name: ‘trim’})

export class TrimPipe implements PipeTransform {

transform(value: any, limit: number) {

if(!value) return null;

return value.slice(0,limit);

}

}

After that we will mentioned it inside app.module.ts in declarations as below:-

import {TrimPipe} from ‘./pages/item/trim.pipe’;

declarations: [

AppComponent,

TrimPipe

],

After that we can use the pile inside out html file as below

<p>{{post.body|trim:50}}</p>

Here trim is the name defined inside the pipe and 50 is the limit we are passing to the custom pipe and post.body here is the value are passing inside the transform ()method

What is Pure Pipe

As definition a pure pipe is a pipe which is using pure function as a result of this pure pipe does not have any internal state,Output will remain same as long as the input paramter passed remain same.Angular call these pipe whenever there is a change in the input parameter passed.

What is Impure Pipe

As for impure pipe is the one that do not provide the same output event for same input

What is Parameterized Pipes

{{dob|date:”yyyy”}}

Here it is using : and value after that that is why it is called parameterized Pipes