import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';
import { provideNgxCachr } from 'ngx-cachr';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    provideNgxCachr({
      prefix: 'angular-app:',   // prefix for storage keys (whatever you want)
      defaultTtl: 300000,       // 5 minutes
      defaultStrategy: 'swr',   // stale while revalidate
      debug: true               // adds logging
    })
  ]
};

import { Component, computed, inject } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HttpClient } from '@angular/common/http';
import { cachedResource } from 'ngx-cachr';

@Component({
  selector: 'app-user-profile',
  standalone: true,
  imports: [CommonModule],
  template: `
    @if (user.status() === 'loading') {
      <p>Loading...</p>
    } @else if (user.error()) {
      <p>Error loading user</p>
    } @else if (user.data()) {
      <h1>{{ user.data()?.name }}</h1>
      <p>Email: {{ user.data()?.email }}</p>
      
      <button (click)="user.invalidate()">Refresh</button>
    }
    
    @if (user.status() === 'revalidating') {
      <small>Updating in background...</small>
    }
  `
})
export class UserProfileComponent {
  http = inject(HttpClient);

  // the most simple usage. 
  // personally, i'd move this to a service, but it's just an example.
  user = cachedResource({
    key: 'user-current',
    loader: () => firstValueFrom(this.http.get<any>('/api/user')),
    ttl: 60 * 1000, // keep fresh for 1 minute
  });
}

userId = signal(1);

user = cachedResource(() => ({
  key: ['user', this.userId()], // key changes when userId changes
  loader: () => this.fetchUser(this.userId())
}));

nextUser() {
  // user.data() will automatically update now
  this.userId.update(id => id + 1);
}