> ## Documentation Index
> Fetch the complete documentation index at: https://www.pagent.ai/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Angular

> Add pagent to an Angular app.

Add the tag to the `<head>` of `src/index.html`. Don't add it to the `scripts` list in `angular.json`: Angular bundles those after the page has started.

```html src/index.html theme={"dark"}
<head>
  <meta charset="utf-8" />
  <script
    src="https://cdn.pagent.ai/js/sdk.js"
    data-client-key="YOUR_CLIENT_KEY">
  </script>
  <base href="/" />
</head>
```

* **No hydration wait.** pagent can't tell when Angular has finished rendering or hydrating, so `data-await-hydration` has no effect. Leave it out.
* **Check your variants:** content Angular renders after loading data may appear after pagent has run. Open each test's preview link once and check that the variant shows.
* **Navigation** with the Angular Router is tracked automatically. With the hash location strategy, send a `navigate` command on every route change, as described in [Frameworks](https://www.pagent.ai/docs/install/frameworks.md#rules-for-every-framework).

See [Frameworks](https://www.pagent.ai/docs/install/frameworks.md) for the shared rules and the Content Security Policy.

## Check it worked

1. Deploy, then open your site in a private browser window.
2. Back in pagent, click **Check connection** in the install step.
3. Open a test's preview link and check that the variant shows and stays after the page has finished loading.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.