python ruby-programming-language Smalltalk Vue.js Knockoutjs TypeScript JavaScript, OOPs JavaScript Angular 7, Interview Questions Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 4 Angular 2 AngularJs 1.x NodeJs Perl Programming R Programming RequireJs Rust Programming Backbonejs closure programming language go-programming-language kotlin-programming-language
6 Pipe decorator

Angular PipeTransform Interface

What Is PipeTransform interface?
The Pipe class implements the PipeTransform interface that accepts input value (It is optional parameters) and returns the transformed value.

The transform method is an important method to a pipe.

To create a Pipe, you must implement this interface.

Angular invokes the transform method with the value of a binding as the first, and second argument in list form.

The PipeTransform interface looks like -
export interface PipeTransform {
    transform(valueany, ...argsany[]): any;
}

And it imported from Angular core -
import {PipePipeTransformfrom '@angular/core';


Two Categories of Pipes in Angular –
1)      pure
2)      impure
Every pipe has been pure by default. If you want to make a pipe impure that time you will allow the setting pure flag to false.

Angular Impure Pipes –

What Is Impure Pipe?
Angular executes an impure pipe during every component change detection cycle. An impure pipe is called often, as often as every keystroke or mouse-move.

If you want to make a pipe impure that time you will allow the setting pure flag to false.
@Pipe({
  name: 'currency',
  pure:false
})

The example for impure pipe –
import { PipePipeTransform } from '@angular/core';

@Pipe({
  name: 'currency',
  pure:false
})
export class CurrencyPipe implements PipeTransform {

  transform(valueanyargs?: any): any {
    if (!value) {
      return '1.00';
    }

    return value;
  }
}

Angular Pure Pipes –

What Is Pure Pipe?
Angular executes a pure pipe only when it detects a pure change to the input value. A pure change can be primitive or non-primitive.

Primitive data are only single values, they have not special capabilities and the non-primitive data types are used to store the group of values.

@Pipe({
  name: 'currency'
})

OR
@Pipe({
  name: 'currency',
  pure: true
})

And another example for a pure pipe –
import { PipePipeTransform } from '@angular/core';

@Pipe({
  name: 'currency'
})
export class CurrencyPipe implements PipeTransform {

  transform(valueanyargs?: any): any {
    if (!value) {
      return '1.00';
    }

    return value;
  }
}
ANIL SINGH

Hi there! Welcome to my blog. My name is Anil Singh. I'm a author of this blog. For more detail about me, kindly refer to this link..
My Blogs - http://code-sample.com and http://code-sample.xyz
My Books - Interview Questions and Answers Books- Get Your Book in 15+ Digital Stores Worldwide..

You Might Also Like
www.code-sample.com/. Powered by Blogger.
ASK Questions