Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/akbarsaputrait/ngememoize/llms.txt

Use this file to discover all available pages before exploring further.

Overview

The @Ngememoize decorator caches the result of a method or getter, improving performance by avoiding redundant computations for the same inputs.

Function Signature

function Ngememoize<TArgs extends any[] = any[], TResult = any>(
  options?: MemoizeOptions<TArgs, TResult>
): MethodDecorator

Parameters

options
MemoizeOptions<TArgs, TResult>
default:"{}"
Configuration options for memoization behavior.

Return Value

Returns a method decorator that can be applied to class methods or getters.

Type Parameters

TArgs
any[]
default:"any[]"
The type of the method arguments array.
TResult
any
default:"any"
The return type of the memoized method.

Usage Examples

Basic Method Memoization

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

@Component({
  selector: 'app-calculator',
  template: '...'
})
export class CalculatorComponent {
  @Ngememoize()
  expensiveCalculation(x: number, y: number): number {
    console.log('Computing...');
    return x * y + Math.random();
  }
}

With maxAge Option

@Component({
  selector: 'app-data',
  template: '...'
})
export class DataComponent {
  // Cache expires after 5 seconds
  @Ngememoize({ maxAge: 5000 })
  fetchData(id: string): Observable<Data> {
    return this.http.get<Data>(`/api/data/${id}`);
  }
}

With maxSize Option

@Component({
  selector: 'app-search',
  template: '...'
})
export class SearchComponent {
  // Keep only last 10 results
  @Ngememoize({ maxSize: 10 })
  search(query: string): string[] {
    return this.performSearch(query);
  }
}

With Custom Key Generator

@Component({
  selector: 'app-user',
  template: '...'
})
export class UserComponent {
  @Ngememoize({
    keyGenerator: (user) => user.id.toString()
  })
  processUser(user: User): ProcessedUser {
    return this.transform(user);
  }
}

With Cache Callbacks

@Component({
  selector: 'app-analytics',
  template: '...'
})
export class AnalyticsComponent {
  @Ngememoize({
    onCacheHit: (key) => console.log('Cache hit:', key),
    onCacheMiss: (key) => console.log('Cache miss:', key)
  })
  analyzeData(dataset: number[]): AnalysisResult {
    return this.runAnalysis(dataset);
  }
}

With Debug Label

@Component({
  selector: 'app-report',
  template: '...'
})
export class ReportComponent {
  @Ngememoize({ debugLabel: 'generateReport' })
  generateReport(params: ReportParams): Report {
    return this.buildReport(params);
  }
}

Memoizing Getters

@Component({
  selector: 'app-computed',
  template: '{{ expensiveValue }}'
})
export class ComputedComponent {
  @Ngememoize()
  get expensiveValue(): number {
    console.log('Computing expensive value...');
    return this.heavyComputation();
  }
}

With Promise/Observable Support

@Component({
  selector: 'app-async',
  template: '...'
})
export class AsyncComponent {
  @Ngememoize({ maxAge: 60000 })
  async loadUser(id: string): Promise<User> {
    const response = await fetch(`/api/users/${id}`);
    return response.json();
  }
}

Behavior Notes

  • The decorator automatically filters out null and undefined arguments before caching
  • For Promise-based methods, the cache stores the Promise result after resolution
  • Empty arrays and falsy values are not cached
  • Cache identifiers are automatically generated as ClassName_methodName
  • When maxSize is exceeded, the oldest cache entry (by timestamp) is removed
  • When maxAge is set, expired entries are removed on the next access attempt

Build docs developers (and LLMs) love