# Installation

[![npm version](https://img.shields.io/npm/v/@foresightjs/angular.svg)](https://www.npmjs.com/package/@foresightjs/angular) [![npm downloads](https://img.shields.io/npm/dt/@foresightjs/angular.svg)](https://www.npmjs.com/package/@foresightjs/angular)

`@foresightjs/angular` is the official Angular package for ForesightJS. It ships the standalone [`[fsForesight]`](/docs/angular/directive.md) directive for the common case, plus [`ForesightService`](/docs/angular/foresight-service.md), [`ForesightComponent`](/docs/angular/foresight-component.md), and [`injectForesightEvent`](/docs/angular/injectForesightEvent.md) for manual registration and event listeners.

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

```
import { ForesightDirective, ForesightManager, ForesightService } from "@foresightjs/angular"
```

Requires Angular 17 or newer.

## Configuring the manager[​](#configuring-the-manager "Direct link to Configuring the manager")

You don't have to configure anything. The manager auto-initializes with sensible defaults the first time you register an element.

If you want to tweak global behavior, call `ForesightManager.initialize()` once in your `main.ts` before your app renders. See [Initialize the Manager](/docs/angular/initialize-the-manager.md) and [Global Settings](/docs/angular/configuration/global-settings.md).

## Devtools[​](#devtools "Direct link to Devtools")

The visual [Development Tools](/docs/angular/devtools.md) live in their own package (`js.foresight-devtools`) and work the same regardless of framework.