Angular caching

Lightweight library for data caching

Usage

Library provides a simple InMemoryCache optimized decorator for methods that allow caching returned result in memory. Can be used with methods in Components, Directives, Services, and Pipes. You can cache Observables, Promises, primitives, objects (remember about immutability, copy cache results if you need to mutate cached object).

You can pass to InMemoryCache options object with the next optional properties:

• ttl: number - time to live in milliseconds. After that time this particular cached result will be invalidated. By default cache stored until function exists.
• cacheSize: number - number of cached calls with different parameters.
• sync: boolean - by default 'false'. That means the decorator returns a result and then sets the cache as a microtask. If set 'true' decorator set cache and then return the result in a synchronous way.

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

import { InMemoryCache } from 'angular-caching/inmemory-cache';

@Component({
  selector: 'app-custom',
  templateUrl: './custom.component.html',
  styleUrls: ['./custom.component.scss'],
})
export class CustomComponent {

  public primitiveResult: number; 
  public observableResult: Observable<any>; 

  public makeCalculations() {
    this.primitiveResult = this.getPrimitive(1,2);
    this.observableResult = this.getObservable(3, 4);
  }
  
  @InMemoryCache({ ttl: 10000, cacheSize: 2, sync: false })
  private getPrimitive(paramOne: number, paramTwo: number): number {
    let result
    // *
    // * Do some heavy calculation and set responce to 'result' variable
    // *
    return result
  }

    @InMemoryCache()
  private getObservable(paramOne: number, paramTwo: number): Observable<any> {
    let result
    // *
    // * Do request and set responce to 'result' variable
    // *
    return result
  }
}