Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.cookiechimp.com/docs/llms.txt

Use this file to discover all available pages before exploring further.

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.

​
How do I handle client-side navigation?

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.