# Quick Start

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

## Basic Usage Example[​](#basic-usage-example "Direct link to Basic Usage Example")

The simplest way to register an element is the [`[fsForesight]`](/docs/angular/directive.md) 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`](/docs/angular/foresight-component.md).

## Provide registration options[​](#provide-registration-options "Direct link to 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](/docs/angular/configuration/registration-options.md) for the full list.

## Reading prediction state[​](#reading-prediction-state "Direct link to 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[​](#development-tools "Direct link to Development Tools")

ForesightJS has dedicated [Development Tools](/docs/angular/devtools.md) 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
})
```