🎯

frontend-angular-api-service

🎯Skill

from duc01226/easyplatform

VibeIndex|
What it does

frontend-angular-api-service skill from duc01226/easyplatform

πŸ“¦

Part of

duc01226/easyplatform(87 items)

frontend-angular-api-service

Installation

πŸ“‹ No install commands found in docs. Showing default command. Check GitHub for actual instructions.
Quick InstallInstall with npx
npx skills add duc01226/easyplatform --skill frontend-angular-api-service
7Installs
3
-
Last UpdatedJan 23, 2026

Skill Details

SKILL.md

Use when creating API services for backend communication with proper patterns for caching, error handling, and type safety.

Overview

# Angular API Service Development Workflow

Use when creating/modifying API services extending PlatformApiService for backend communication.

Decision Tree

```

What kind of API service?

β”œβ”€β”€ Standard CRUD β†’ extend PlatformApiService + get/post/put/deleteRequest

β”œβ”€β”€ With caching β†’ + enableCache option in get() calls

β”œβ”€β”€ File upload/download β†’ + postFormData() / getBlob()

β”œβ”€β”€ External API β†’ + override getDefaultHeaders()

β”œβ”€β”€ Search/autocomplete β†’ + debounce in component, cache short-lived

└── Validation endpoint β†’ return Observable

```

Workflow

  1. Search existing services: grep "{Feature}ApiService" --include="*.ts"
  2. Read references (see Read Directives below)
  3. Define DTOs: request interfaces, response interfaces, command interfaces
  4. Create service extending PlatformApiService with @Injectable({ providedIn: 'root' })
  5. Implement apiUrl getter using environment.apiUrl + '/api/{Controller}'
  6. Add query methods (get), command methods (post/put/delete), validation methods
  7. Verify checklist below

Key Rules

  • Always extend PlatformApiService (never use HttpClient directly)
  • Use environment.apiUrl for base URL (never hardcode)
  • All methods must have return type annotations: Observable
  • Define DTOs for all request/response types
  • Use { enableCache: true, cacheKey, cacheDurationMs } for cacheable endpoints
  • File uploads use postFormData(), downloads use getBlob()
  • Error handling done in component via tapResponse(), not in service

File Location

```

src/Frontend/libs/apps-domains/src/lib/{domain}/services/{feature}-api.service.ts

```

⚠️ MUST READ Before Implementation

IMPORTANT: You MUST read these files before writing any code. Do NOT skip.

  1. ⚠️ MUST READ .claude/skills/shared/angular-design-system.md β€” platform-core imports
  2. ⚠️ MUST READ .claude/skills/frontend-angular-api-service/references/api-service-patterns.md β€” CRUD, caching, upload, search patterns
  3. ⚠️ MUST READ target app design system: docs/design-system/07-technical-guide.md

Anti-Patterns

  • constructor(private http: HttpClient) - must extend PlatformApiService
  • Hardcoded URLs: this.get('https://api.example.com/...') - use environment
  • Missing return type: getUser(id) - must be getUser(id): Observable
  • Untyped response: this.get('/users') - must be this.get('/users')
  • Error handling in service - let component handle via tapResponse()

Verification Checklist

  • [ ] Extends PlatformApiService
  • [ ] apiUrl getter returns environment.apiUrl + '/api/{Controller}'
  • [ ] All methods have Observable return type
  • [ ] DTOs defined for request/response types
  • [ ] Caching configured for stable lookup endpoints
  • [ ] File operations use postFormData/getBlob
  • [ ] @Injectable({ providedIn: 'root' }) decorator

IMPORTANT Task Planning Notes

  • Always plan and break many small todo tasks
  • Always add a final review todo task to review the works done at the end to find any fix or enhancement needed