# Angular experiments installation - Docs

1.  1

    ## Install the package

    Required

    Install the PostHog JavaScript library using your package manager:

    PostHog AI

    ### npm

    ```bash
    npm install posthog-js
    ```

    ### yarn

    ```bash
    yarn add posthog-js
    ```

    ### pnpm

    ```bash
    pnpm add posthog-js
    ```

2.  2

    ## Initialize PostHog

    Required

    In your `src/main.ts`, initialize PostHog using your project token and instance address:

    ## Angular 17+

    For Angular v17 and above, you can set up PostHog as a singleton service. To do this, start by creating and injecting a `PosthogService` instance.

    Create a service by running `ng g service services/posthog`. The service should look like this:

    src/main.ts

    PostHog AI

    ```typescript
    // src/app/services/posthog.service.ts
    import { DestroyRef, Injectable, NgZone } from "@angular/core";
    import posthog from "posthog-js";
    import { environment } from "../../environments/environment";
    import { Router } from "@angular/router";
    @Injectable({ providedIn: "root" })
    export class PosthogService {
      constructor(
        private ngZone: NgZone,
        private router: Router,
        private destroyRef: DestroyRef,
      ) {
        this.initPostHog();
      }
      private initPostHog() {
        this.ngZone.runOutsideAngular(() => {
          posthog.init(environment.posthogKey, {
            api_host: environment.posthogHost,
            defaults: '2026-01-30',
          });
        });
      }
    }
    ```

    The service is initialized [outside of the Angular zone](https://angular.dev/api/core/NgZone#runOutsideAngular) to reduce change detection cycles. This is important to avoid performance issues with session recording. Then, inject the service in your app's root component `app.component.ts`. This will make sure PostHog is initialized before any other component is rendered.

    src/app/app.component.ts

    PostHog AI

    ```typescript
    // src/app/app.component.ts
    import { Component } from "@angular/core";
    import { RouterOutlet } from "@angular/router";
    import { PosthogService } from "./services/posthog.service";
    @Component({
      selector: "app-root",
      styleUrls: ["./app.component.scss"],
      template: `
        <router-outlet />`,
      imports: [RouterOutlet],
    })
    export class AppComponent {
      title = "angular-app";
      constructor(posthogService: PosthogService) {}
    }
    ```

    ## Angular 16 and below

    In your `src/main.ts`, initialize PostHog using your project API key and instance address. You can find both in your [project settings](https://us.posthog.com/project/settings).

    src/main.ts

    PostHog AI

    ```typescript
    // src/main.ts
    import { bootstrapApplication } from '@angular/platform-browser';
    import { appConfig } from './app/app.config';
    import { AppComponent } from './app/app.component';
    import { environment } from "./environments/environment";
    import posthog from 'posthog-js'
    posthog.init(environment.posthogKey, {
      api_host: environment.posthogHost,
      defaults: '2025-11-30'
    })
    bootstrapApplication(AppComponent, appConfig)
      .catch((err) => console.error(err));
    ```

3.  3

    ## Implement your experiment

    Required

    Experiments run on top of our feature flags. You can define which version of your code runs based on the return value of the feature flag:

    ```javascript
    if (posthog.getFeatureFlag('your-experiment-feature-flag') === 'test') {
        // Do something differently for this user
    } else {
        // It's a good idea to let control variant always be the default behaviour,
        // so if something goes wrong with flag evaluation, you don't break your app.
    }
    // Test that it works
    posthog.featureFlags.overrideFeatureFlags({ flags: {'your-experiment-feature-flag': 'test'} })
    ```

4.  4

    ## Run your experiment

    Required

    Once you've implemented the feature flag in your code, you'll enable it for a target audience by creating a new experiment in the PostHog dashboard.

5.  5

    ## Next steps

    Recommended

    Now that you're running experiments, continue with the resources below to learn what else Experiments enables within the PostHog platform.

    | Resource | Description |
    | --- | --- |
    | [Creating an experiment](/docs/experiments/creating-an-experiment.md) | How to create an experiment in PostHog |
    | [Adding experiment code](/docs/experiments/adding-experiment-code.md) | How to implement experiments for all platforms |
    | [Statistical significance](/docs/experiments/statistics-bayesian.md) | Understanding when results are meaningful |
    | [Experiment insights](/docs/experiments/analyzing-results.md) | How to analyze your experiment data |
    | [More tutorials](/docs/experiments/tutorials.md) | Other real-world examples and use cases |

### Community questions

Ask a question

### Was this page useful?

HelpfulCould be better