Angular

Community Contribution Welcome

The maintainer of ForesightJS doesn't use Angular, so this documentation is minimal. If you're using ForesightJS with Angular and would like to help improve these docs with more detailed examples and best practices, PRs are greatly appreciated!

npm install js.foresight ngx-foresight
npm install -D js.foresight-devtools
# or
pnpm add js.foresight js.foresight-devtools ngx-foresight
pnpm add -D js.foresight-devtools

After that import the ForesightjsDirective to the components with href and routerLink, and use the ForesightjsStrategy as preloadingStrategy in the router's configuration. For example:

import { ForesightManager } from "js.foresight"
import { ForesightDevtools } from "js.foresight-devtools"
import { ForesightjsDirective } from "ngx-foresight"

ForesightManager.initialize({
  enableMousePrediction: true,
  positionHistorySize: 8,
  trajectoryPredictionTime: 80,
  defaultHitSlop: 10,
  enableTabPrediction: true,
  tabOffset: 3,
  enableScrollPrediction: true,
  scrollMargin: 150,
})

ForesightDevtools.initialize({
  showDebugger: true,
  isControlPanelDefaultMinimized: true, // optional setting which allows you to minimize the control panel on default
  showNameTags: true, // optional setting which shows the name of the element
  sortElementList: "visibility", // optional setting for how the elements in the control panel are sorted
})

<div class="pill-group-horizontal">
  <a href="/feature1" class="pill" registerForesight="Feature 1">Feature 1</a>
  <a href="/feature2" class="pill" registerForesight="Feature 2">Feature 2</a>
  <a href="/feature3" class="pill" registerForesight="Feature 3">Feature 3</a>
</div>

// configure preloading strategy as per routes
;(provideRouter(routes, withPreloading(ForesightjsStrategy)),
  // for older versions
  RouterModule.forRoot(routes, { preloadingStrategy: ForesightjsStrategy }))