Angular

Angular apps are typically single-page applications powered by the Angular Router. CookieChimp installs in index.html and reinitializes on route changes via the Router event stream.

Before you start: have your CookieChimp Account ID ready (replace YOUR_ACCOUNT_ID in the snippets below). If you're testing on localhost, add localhost to Additional Domains in your Account Settings — otherwise the banner won't show locally.

How do I load the CookieChimp script?

Add the script tag to src/index.html inside <head>, before Angular’s bundle is injected:

<!-- src/index.html -->
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>My App</title>
    <script src="https://cookiechimp.com/widget/YOUR_ACCOUNT_ID.js"></script>
    <base href="/" />
  </head>
  <body>
    <app-root></app-root>
  </body>
</html>

Replace YOUR_ACCOUNT_ID with your actual CookieChimp Account ID from your dashboard.

Angular Router replaces the view without a full page reload. Listen to NavigationEnd events and re-inject the CookieChimp script so it rescans the new route’s DOM. The static <script> tag in index.html handles the first load, so we skip the initial event. If you’re using a standalone component root (Angular 17+):

// src/app/app.component.ts
import { Component, inject, OnInit } from "@angular/core";
import { Router, NavigationEnd, RouterOutlet } from "@angular/router";
import { filter, skip } from "rxjs";

@Component({
  selector: "app-root",
  standalone: true,
  imports: [RouterOutlet],
  template: `
    <div id="cookiechimp-container"></div>
    <router-outlet />
  `,
})
export class AppComponent implements OnInit {
  private router = inject(Router);

  ngOnInit() {
    this.router.events
      .pipe(
        filter((e) => e instanceof NavigationEnd),
        skip(1), // initial navigation is handled by the static <script> tag
      )
      .subscribe(() => {
        document.getElementById("cookiechimp-js")?.remove();

        const script = document.createElement("script");
        script.src = "https://cookiechimp.com/widget/YOUR_ACCOUNT_ID.js";
        script.id = "cookiechimp-js";
        document.head.appendChild(script);
      });
  }
}

For an NgModule-based app, place the same logic in your AppComponent’s ngOnInit.

Wrap the CookieChimp event listeners in an Angular service so any component can subscribe:

// src/app/consent.service.ts
import { Injectable, NgZone } from "@angular/core";
import { BehaviorSubject } from "rxjs";

declare global {
  interface Window {
    CookieConsent?: {
      acceptedService?: (service: string, category: string) => boolean;
    };
  }
}

@Injectable({ providedIn: "root" })
export class ConsentService {
  private readonly state = new BehaviorSubject<Record<string, boolean>>({});
  readonly state$ = this.state.asObservable();

  constructor(private zone: NgZone) {
    const update = () => {
      this.zone.run(() => {
        this.state.next({
          analytics: !!window.CookieConsent?.acceptedService?.("Google Analytics", "analytics"),
        });
      });
    };

    update();
    window.addEventListener("cc:onConsented", update);
    window.addEventListener("cc:onUpdate", update);
  }
}

Use it in a component:

constructor(private consent: ConsentService) {}

ngOnInit() {
  this.consent.state$.subscribe((s) => {
    console.log(s.analytics ? "✅ analytics allowed" : "❌ analytics blocked");
  });
}

Replace "Google Analytics" and "analytics" with the exact service and category names you configured in CookieChimp.

For all available events, see Callbacks & Events.

Troubleshooting

Banner shows on first load but not after navigation — make sure the NavigationEnd subscription is in your root component’s ngOnInit, not a lazy-loaded module.
Change detection issues with consent state — wrap state updates inside NgZone.run() (shown above) so Angular re-renders.

Banner doesn't appear at all — confirm localhost (or your domain) is in Additional Domains in Account Settings.
Enable Debug mode in the CookieChimp dashboard and check the browser console for logs.

Get Started

Platform Specific Installation

Features

Integrations

Advanced

How do I load the CookieChimp script?

How do I handle client-side navigation?

Troubleshooting

​How do I load the CookieChimp script?

​How do I handle client-side navigation?

​How do I check consent status in code?

​Troubleshooting

How do I load the CookieChimp script?

How do I handle client-side navigation?

How do I check consent status in code?

Troubleshooting