Angular pipe for memoize function execution in the template

Downloads in past


1.0.05 years ago5 years agoMinified + gzip package size for ngx-pipe-function in KB


Angular Optimization with Pipe Function

Angular pipe for memoize function execution in the template

This small pipe will improve the performance in the Angular application. Due to memoization and reduced number of computations with pure pipes, You will gain more optimization in Your applications.

Table of Contents


npm install ngx-pipe-function --save


Register the NgxPipeFunctionModule in your application NgModule imports.
import { NgxPipeFunctionModule } from 'ngx-pipe-function';

  imports: [NgxPipeFunctionModule],
export class AppModule {}


Angular executes a pure pipe only when it detects a pure change to the input value. A pure change is either a change to a primitive input value (String, Number, Boolean, Symbol) or a changed object reference (Date, Array, Function, Object).
{{ argument | pipeFunction : method [: context] }}
Just provide argument and executable method to the template with pipeFunction
    <h3>{{ value | pipeFunction : double }}</h3>
export class Component {
  public value = 100;

  public double(value: number): number {
    return value * 2;

You could provide multiple arguments for the function like that:
    <h3>{{ [name, surname] | pipeFunction : compile }}</h3>
export class Component {
  public name = 'Bob';
  public surname = 'Dylan';

  public compile([name, surname]: string[]): string {
    return btoa(`${name} ${surname}`);
Function with context
We still could have optimization in impure functions with Angular pipes. Just provide context as second parameter to the pipeFunction pipe.
<h3>{{ value | pipeFunction : output : this }}</h3>

Alternative variant use bind
<h3>{{ value | pipeFunction : output.bind(this) }}</h3>

export class Component {
  public value = 'My name is';
  public name = 'Dylan';

  public output(value: string): string {
    return `${value} ${}`;

Note: Also You colud take a look into __tests__ directory for more examples of usage.