Members

(constant) CACHE_CONFIG

The injection token for the cache config.

Source

(constant) CACHE_CONFIG

The injection token for the cache config.

Source

Methods

cachedResource(optionsOrFn) → {CachedResource.<T>}

The primary resource for fetching and caching data. returns a reactive CachedResource object containing signals for data, status, and error.

Supports reactive dependencies by passing a function that returns the options. When dependencies change (any signal accessed within the function), the resource automatically re-fetches.

Parameters:
NameTypeDescription
optionsOrFnCachedResourceOptions.<T> | function

Configuration object or a function returning one.

Source
Returns:

A reactive object with data, status, and error signals.

Type: 
CachedResource.<T>
Examples
// Simple usage
const user = cachedResource({
  key: 'user:1',
  loader: () => fetch('/api/user/1').then(r => r.json()),
  ttl: 60000 // 1 minute
});

// Template usage
// <div>{{ user.data()?.name }}</div>
// Reactive usage (dependent query)
const userId = signal(1);

const user = cachedResource(() => ({
  key: ['user', userId()], // Updates when userId changes
  loader: () => fetch(`/api/user/${userId()}`).then(r => r.json())
}));

// Trigger re-fetch
userId.set(2);

cachedResource(optionsOrFn) → {CachedResource.<T>}

The primary resource for fetching and caching data. returns a reactive CachedResource object containing signals for data, status, and error.

Supports reactive dependencies by passing a function that returns the options. When dependencies change (any signal accessed within the function), the resource automatically re-fetches.

Parameters:
NameTypeDescription
optionsOrFnCachedResourceOptions.<T> | function

Configuration object or a function returning one.

Source
Returns:

A reactive object with data, status, and error signals.

Type: 
CachedResource.<T>
Examples
// Simple usage
const user = cachedResource({
  key: 'user:1',
  loader: () => fetch('/api/user/1').then(r => r.json()),
  ttl: 60000 // 1 minute
});

// Template usage
// <div>{{ user.data()?.name }}</div>
// Reactive usage (dependent query)
const userId = signal(1);

const user = cachedResource(() => ({
  key: ['user', userId()], // Updates when userId changes
  loader: () => fetch(`/api/user/${userId()}`).then(r => r.json())
}));

// Trigger re-fetch
userId.set(2);

provideNgxCachr(config) → {EnvironmentProviders}

Sets up the ngx-cachr library in the application. Should be called in the providers array of app.config.ts or main.ts.

Parameters:
NameTypeDescription
configCacheConfigProvider

Global configuration for the cache.

Source
Returns:
Type: 
EnvironmentProviders
Example
bootstrapApplication(AppComponent, {
  providers: [
    provideNgxCachr({
      defaultTtl: 60000,
      debug: true
    })
  ]
});

Type Definitions

CacheKey

Cache key used to resolve or store data from the cache.

Type:
  • string | number | Array.<(string|number)>
Source
Example
'user:123'
'post:456'
['user:123', 'post:456']
['user:123', 'post:456', 'comment:789']

CacheStrategy

The caching strategy to use.

Type:
  • 'cache-first' | 'network-first' | 'swr'
Source

CacheStrategy

The caching strategy to use.

Type:
  • 'cache-first' | 'network-first' | 'swr'
Source