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​