@foresightjs/angular

Official Angular bindings for ForesightJS, a lightweight library that predicts user intent (mouse trajectory, keyboard navigation, scroll, touch) to trigger callbacks like prefetching before the user interacts.

• Docs: foresightjs.com/docs/angular/installation
• Core library: js.foresight
• Playground: foresightjs.com

Installation

pnpm add @foresightjs/angular js.foresight
# or
npm install @foresightjs/angular js.foresight

Requires Angular 17+

What's included

• ForesightDirective -> standalone [fsForesight] directive to register an element with a callback or full options object
• ForesightService -> injectable service for manual registration and manager event subscriptions
• ForesightComponent -> standalone wrapper component that registers its host element
• injectForesightEvent -> helper to subscribe to a ForesightManager event for the lifetime of the current injection context

Directive usage

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

@Component({
  standalone: true,
  imports: [ForesightDirective],
  template: `
    <a
      href="/pricing"
      [fsForesight]="prefetchPricing"
      fsForesightName="pricing-link"
      #foresight="foresight"
    >
      Pricing {{ foresight.state().isPredicted ? "(ready)" : "" }}
    </a>
  `,
})
export class NavComponent {
  readonly prefetchPricing = () => {
    void fetch("/api/pricing")
  }
}

For full options, bind an object:

<button
  [fsForesight]="{
    callback: preloadCheckout,
    name: 'checkout',
    hitSlop: 40,
    enabled: isCheckoutEnabled
  }"
>
  Checkout
</button>

Contributing

Please see the contributing guidelines.

License

MIT