Pure Pipes in Angular

Question

As a beginner in Angular, I came across the pure pipes which

• a) Executes only when a pure change to the input value is detected.
• b) A pure change is either a change to a primitive input value
  (String, Number, Boolean) or a changed object reference (Array, Date, Function, Object).
• c) A Pure pipe is not executed if the input to the pipe is an object and only the property values of that object changes but not the reference.

The object reference part I am clear with and the problem lies with the primitive types.

A crucial fact lies on optimization with pure pipe is

Angular is going to evaluate given pure pipe call only if it has received different arguments compared to its previous invocation.

I tried with an example:

applypure.pipe.ts

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

@Pipe({
  name: 'applypure',
  pure: true 
})
export class ApplypurePipe implements PipeTransform {
  count = 0;
  constructor() {
    // To determine an instance is created
    console.log('pipe created:');
  }

    transform(value: number, exponent: number): number {
    //this.count++;
    console.log(value);
    return Math.pow(value, exponent);;
  }
}

app.component.ts

import { Component } from '@angular/core';    

@Component({
  selector: 'my-app',
  template: `
            {{12 | applypure : 2}}
            {{12 | applypure: 2 }}  
           `
})
export class AppComponent  {
  }     
}

The result is shown below :

The same input is being passed to pure pipe immediately after, yet its transform method is called twice. Shouldn't it skip the re-evaluation?. Please clarify.

Answer 1

I think I found the right expression !.

a) to make sharing/caching work I believe there should be only one pipe usage of the expression in the component. The transform function of the pure pipe wont re-evaluate for the immediate same input.

Eg. When you input 12 and enter, transform fn is invoked and if you immediately input 12 again the invocation of transform fn is skipped.

So in Pure Pipes, last Input to the piped expression will be checked and it's the criteria for a valid change detection to run when compared to immediate next inputs.

app.component.html

    Type:
<input type="text" #box (keyup.enter)="addName(box.value); box.value=''" placeholder="Parameter"> 
  <div *ngIf="number2">
  {{number2 | applypure : 2}} 
</div>

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html'
})
export class AppComponent  {
  number2: number;

  addName(num: number) {
    this.number2 = num;
    console.log("Log at component: "+ this.number2);
  }

}

After First Input of 12

After second Input of 12

Answer 2

There is no shared "cache" between pipes. The "caching" applies for every call in the template

Answer 3

I believe this is happening because every time you use your pipe in the HTML it makes a call to the transform function. The pipe doesn't differ between the attributes you are passing to its function, according to the PipeTransform interface in the Angular repository:

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