Angular Resource

If you're working with Angular 19's new resource API, this skill keeps Claude up to date on the modern approach to async data loading with signals. It covers the core patterns: basic loaders that fetch data on component init, and request-based loaders that refetch when signal dependencies change. The resource API is Angular's answer to making reactive data fetching feel natural with signals, replacing older patterns like async pipe gymnastics. The examples are straightforward and show the two main use cases you'll actually hit in practice.

skills.sh installs: 178
GitHub stars: 7
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add oguzhan18/angular-ecosystem-skills --skill angular-resource --agent claude-code

Installs into .claude/skills of the current project.

Files

Angular Resource

Version: Angular 19+ (2025) Tags: Resource, Async, Signals

References: Resource API

Best Practices

Use resource for async data

import { resource } from '@angular/core/rxjs-interop';

@Component({})
export class MyComponent {
  private http = inject(HttpClient);
  
  users = resource({
    loader: () => this.http.get<User[]>('/api/users').toPromise()
  });
}

Use with request

id = signal<string>('');

user = resource({
  request: () => ({ id: this.id() }),
  loader: ({ request }) => this.http.getUser(request.id).toPromise()
});

SKILL.md on GitHub

Sponsors

Promote your product hereReach 125k+ visitors monthly Promote your product hereReach 125k+ visitors monthly