@void-snippets/angular

injectGet

Single-item query — auto-disabled when the id Signal is empty.

#What it does

Fetches a single item by ID. Accepts MaybeSignal — when the ID signal is undefined, null, or "", the query is automatically disabled and no request is made. When the ID changes (e.g. navigating from one detail page to another), TanStack refetches for the new ID and cancels any in-flight request for the old one.

#Signature

typescript

contactResource.injectGet(id: MaybeSignal<Contact.Id | undefined>): VSAngularGetResult<Contact.Detail>

#Parameters

Parameter	Type	Description
`id`	`MaybeSignal`	The item's ID. Query stays disabled until a truthy ID is provided.

#Return values

Field	Type	Description
`item`	`Signal`	The fetched item. `undefined` while loading or when ID is falsy.
`isLoading`	`Signal`	`true` on the first fetch when there's no cached data.
`isFetching`	`Signal`	`true` during any network request for this item.
`isRefetching`	`Signal`	`true` during a background refetch while `item` is already showing.
`isError`	`Signal`	`true` when the last fetch failed.
`error`	`Signal`	The error from the last failed fetch.
`refetch`	`() => void`	Manually re-fetch this item.

#Example

typescript

@Component({
  template: `
    @if (result.isLoading()) {
      <app-detail-skeleton />
    } @else if (result.isError()) {
      <app-error-banner [message]="result.error()?.message" />
    } @else if (result.item(); as contact) {
      <h1>{{ contact.name }}</h1>
      <p>{{ contact.email }}</p>
    }
  `,
})
export class ContactDetailComponent {
  private contactResource = useContactResource();
  private route = inject(ActivatedRoute);

  // Derived signal — query is disabled until the param is available
  private contactId = toSignal(
    this.route.paramMap.pipe(map((p) => p.get('contactId') ?? undefined)),
  );

  result = this.contactResource.injectGet(this.contactId);
}