@void-snippets/angular

AngularResourceService

HttpClient-backed abstract base class — list, get, create, update, delete, with AbortSignal cancellation.

#What it does

An @Injectable() abstract base class backed by Angular's HttpClient. Extend it once per API resource — pass the endpoint path to super() — and you get five typed Promise-returning methods for free. Every read method accepts an optional AbortSignal; when TanStack Query threads its signal through, in-flight HTTP requests are cancelled at the OS level when the component unmounts or the query key changes.

#Signature

typescript

abstract class AngularResourceService<
  TId,
  TBase,
  TDetail    = TBase,
  TCreate    = Partial<TBase>,
  TUpdate    = Partial<TBase>,
  TListRaw   = VSDefaultPaginatedResponse<TBase>,
  TSingleRaw = VSDefaultSingleResponse<TDetail>,
>

#Methods

Method	Input	Output	HTTP call
`list(params?, signal?)`	`VSQueryParams`, `AbortSignal`	`Promise`	`GET /endpoint?page=1&limit=10&...`
`get(id, signal?)`	`TId`, `AbortSignal`	`Promise`	`GET /endpoint/:id`
`create(payload)`	`TCreate`	`Promise`	`POST /endpoint`
`update(id, payload)`	`TId, TUpdate`	`Promise`	`PATCH /endpoint/:id`
`delete(id)`	`TId`	`Promise`	`DELETE /endpoint/:id`

Cancellation. When provideHttpClient(withFetch()) is in your providers, Angular's Fetch backend calls the native fetch abort controller on unsubscription — real OS-level cancellation, not just discarding the response. The XHR backend calls xhr.abort(), which also cancels the network request. Both are handled internally; you don't configure anything extra.

#Example

typescript

// contacts/contacts.service.ts
import { Injectable } from '@angular/core';
import { AngularResourceService } from '@void-snippets/angular';
import type { Contact } from './contacts.types';

@Injectable({ providedIn: 'root' })
export class ContactsService extends AngularResourceService<
  Contact.Id,      // TId
  Contact.Base,    // TBase   — list item shape
  Contact.Detail,  // TDetail — single-item shape
  Contact.Apis.Create,
  Contact.Apis.Update
> {
  constructor() {
    super('/api/v1/contacts');
  }
}

ContactsService is now injectable anywhere in your app. Auth, CSRF, retry, and tracing are handled by the HttpClient interceptors wired in provideHttpClient(...) — the service itself has no opinion on any of those concerns.