Quick Start

This guide walks through registering your first element with ForesightJS in Angular and reading its prediction state.

Basic Usage Example

The simplest way to register an element is the [fsForesight] directive. Import the standalone directive, put it on an element, and give it a callback:

import { Component } from "@angular/core"
import { ForesightDirective } from "@foresightjs/angular"

@Component({
  selector: "app-nav",
  standalone: true,
  imports: [ForesightDirective],
  template: ` <button [fsForesight]="prefetchPricing">Pricing</button> `,
})
export class NavComponent {
  readonly prefetchPricing = () => {
    void fetch("/api/pricing")
  }
}

That's it.

Unregistration is automatic

The directive registers the element when it appears and unregisters it when it is destroyed, so you never have to call unregister() yourself. The same applies to ForesightComponent.

Provide registration options

If you want more control, pass a full options object instead of just a callback:

<button
  [fsForesight]="{
    callback: prefetchCheckout,
    hitSlop: 50,
    name: 'checkout-button',
    meta: { route: '/checkout' },
    reactivateAfter: 5 * 60 * 1000,
    enabled: isCheckoutEnabled
  }"
>
  Checkout
</button>

See registration options for the full list.

Reading prediction state

Export the directive as foresight to read its Angular signal state in the template:

<a
  href="/pricing"
  [fsForesight]="prefetchPricing"
  fsForesightName="pricing-link"
  #foresight="foresight"
>
  {{ foresight.state().isPredicted ? "Pricing ready" : "Pricing" }}
</a>

Development Tools

ForesightJS has dedicated Development Tools that help you understand and tune how prediction is working in your application:

pnpm add js.foresight-devtools
# or
npm install js.foresight-devtools
# or
yarn add js.foresight-devtools

import { ForesightDevtools } from "js.foresight-devtools"

ForesightDevtools.initialize({
  // optional props
})