Skip to main content

ngx-cookieconsent for Angular Web Apps

ngx-cookieconsent is an Angular library that helps you display GDPR-compliant cookie consent banners in your web applications.

Features​

  • Customizable cookie consent popup
  • Supports multiple languages
  • Easy integration with Angular projects
  • Events for user interactions (accept, decline, etc.)

Installation​

npm install ngx-cookieconsent

Usage​

  1. Import the module in your app:
import { NgcCookieConsentModule } from "ngx-cookieconsent";

@NgModule({
  imports: [
    NgcCookieConsentModule.forRoot({
      cookie: {
        domain: "yourdomain.com",
      },
      palette: {
        popup: { background: "#000" },
        button: { background: "#f1d600" },
      },
      theme: "classic",
      type: "info",
      content: {
        message:
          "This website uses cookies to ensure you get the best experience.",
        dismiss: "Got it!",
        link: "Learn more",
        href: "https://yourdomain.com/cookie-policy",
      },
    }),
  ],
})
export class AppModule {}
  1. Add the component to your template:
<ngx-cookieconsent></ngx-cookieconsent>

Handling Events​

You can subscribe to events like popupOpen, popupClose, statusChange, etc., using the NgcCookieConsentService.

import { NgcCookieConsentService } from 'ngx-cookieconsent';

constructor(private ccService: NgcCookieConsentService) {
    this.ccService.statusChange$.subscribe((event) => {
        // Handle consent status change
    });
}

Customization​

You can customize the appearance, content, and behavior via the configuration object passed to forRoot().

Resources​