ngx-cookieconsent
Cookie Consent module for Angular
Demo
View the module in action at https://tinesoft.github.io/ngx-cookieconsent
Dependencies
Installation
Install Cookie Consent
dependency:
npm install --save cookieconsent
// or
yarn add cookieconsent
Now install ngx-cookieconsent
via:
npm install --save ngx-cookieconsent
// or
yarn add ngx-cookieconsent
Note: If you are using Angular CLI
or Nx CLI
to build your app, make sure that cookieconsent
is properly listed as a global library, and as global style.
To do so, edit your angular.json
(or project.json
for Nx CLI based apps) as such:
"scripts": [
"node_modules/cookieconsent/build/cookieconsent.min.js"
],
"styles": [
"node_modules/cookieconsent/build/cookieconsent.min.css"
],
Configuration
Prepare the config:
import {NgcCookieConsentConfig} from 'ngx-cookieconsent';
const cookieConfig:NgcCookieConsentConfig = {
cookie: {
domain: 'localhost'
},
palette: {
popup: {
background: '#000'
},
button: {
background: '#f1d600'
}
},
theme: 'edgeless',
type: 'opt-out'
};
For Angular Standalone API-based apps
If you are using Angular Standalone API to bootstrap your application, you can configure the library by leveraging the new provideNgcCookieConsent(config)
helper (added since v5.x.x
), as such:
import {provideNgcCookieConsent} from 'ngx-cookieconsent';
bootstrapApplication(AppComponent, {
providers: [
provideNgcCookieConsent(cookieConfig),
]
});
For Angular (ng)Module-based apps
For traditional ngModule-based angular application, you need to import the library module in your application module, as such:
import {NgcCookieConsentModule} from 'ngx-cookieconsent';
@NgModule({
declarations: [AppComponent, ...],
imports: [NgcCookieConsentModule.forRoot(cookieConfig), ...],
bootstrap: [AppComponent]
})
export class AppModule {
}
Other modules in your application can simply import NgcCookieConsentModule
:
import {NgcCookieConsentModule} from 'ngx-cookieconsent';
@NgModule({
declarations: [OtherComponent, ...],
imports: [NgcCookieConsentModule, ...],
})
export class OtherModule {
}
Usage
Inject the NgcCookieContentService
in your main component (i.e. AppComponent
) to show the cookie consent popup after the component is loaded. You don't need to explicitly call its init()
method (done automatically when the service's constructor gets called upon instantiation By Angular).
Also, you can use the injected NgcCookieContentService
to update the config (using init()
), subscribe to events and do stuff like disabling cookies or other.
Here is how it works:
import { Component, OnInit, OnDestroy } from '@angular/core';
import { NgcCookieConsentService } from 'ngx-cookieconsent';
import { Subscription } from 'rxjs';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit, OnDestroy {
private popupOpenSubscription!: Subscription;
private popupCloseSubscription!: Subscription;
private initializingSubscription!: Subscription;
private initializedSubscription!: Subscription;
private initializationErrorSubscription!: Subscription;
private statusChangeSubscription!: Subscription;
private revokeChoiceSubscription!: Subscription;
private noCookieLawSubscription!: Subscription;
constructor(private ccService: NgcCookieConsentService){}
ngOnInit() {
this.popupOpenSubscription = this.ccService.popupOpen$.subscribe(
() => {
});
this.popupCloseSubscription = this.ccService.popupClose$.subscribe(
() => {
});
this.initializingSubscription = this.ccService.initializing$.subscribe(
(event: NgcInitializingEvent) => {
console.log(`initializing: ${JSON.stringify(event)}`);
});
this.initializedSubscription = this.ccService.initialized$.subscribe(
() => {
console.log(`initialized: ${JSON.stringify(event)}`);
});
this.initializationErrorSubscription = this.ccService.initializationError$.subscribe(
(event: NgcInitializationErrorEvent) => {
console.log(`initializationError: ${JSON.stringify(event.error?.message)}`);
});
this.statusChangeSubscription = this.ccService.statusChange$.subscribe(
(event: NgcStatusChangeEvent) => {
});
this.revokeChoiceSubscription = this.ccService.revokeChoice$.subscribe(
() => {
});
this.noCookieLawSubscription = this.ccService.noCookieLaw$.subscribe(
(event: NgcNoCookieLawEvent) => {
});
}
ngOnDestroy() {
this.popupOpenSubscription.unsubscribe();
this.popupCloseSubscription.unsubscribe();
this.initializingSubscription.unsubscribe();
this.initializedSubscription.unsubscribe();
this.initializationErrorSubscription.unsubscribe();
this.statusChangeSubscription.unsubscribe();
this.revokeChoiceSubscription.unsubscribe();
this.noCookieLawSubscription.unsubscribe();
}
}
See Cookie Consent Documentation to see more about how to customize the UI or interact with user interactions.
I18n Support
Messages displayed in the Cookie Consent Bar can easily be translated, using libraries like ngx-translate.
Basically this involved the following steps (using ngx-translate + Anglar CLI):
-
Install and configure ngx-translate
-
Provide the translation JSON files in src/assets/
, for e.g: en.json
, fr.json
, ...
{
"cookie": {
"header": "Cookies used on the website!",
"message": "This website uses cookies to ensure you get the best experience on our website.",
"dismiss": "Got it!",
"allow": "Allow cookies",
"deny": "Decline",
"link": "Learn more",
"policy": "Cookie Policy"
}
}
Note: see content-options.ts for complete list of messages that can be translated.
- Configure your main component
AppComponent
import { Component, OnInit } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
constructor(private ccService: NgcCookieConsentService, private translateService:TranslateService) {
}
ngOnInit() {
this.translateService.addLangs(['en', 'fr']);
this.translateService.setDefaultLang('en');
const browserLang = this.translateService.getBrowserLang();
this.translateService.use(browserLang.match(/en|fr/) ? browserLang : 'en');
this.translateService
.get(['cookie.header', 'cookie.message', 'cookie.dismiss', 'cookie.allow', 'cookie.deny', 'cookie.link', 'cookie.policy'])
.subscribe(data => {
this.ccService.getConfig().content = this.ccService.getConfig().content || {} ;
this.ccService.getConfig().content.header = data['cookie.header'];
this.ccService.getConfig().content.message = data['cookie.message'];
this.ccService.getConfig().content.dismiss = data['cookie.dismiss'];
this.ccService.getConfig().content.allow = data['cookie.allow'];
this.ccService.getConfig().content.deny = data['cookie.deny'];
this.ccService.getConfig().content.link = data['cookie.link'];
this.ccService.getConfig().content.policy = data['cookie.policy'];
this.ccService.destroy();
this.ccService.init(this.ccService.getConfig());
});
}
}
Custom Layout Support
Cookie Consent supports custom layouts, and so does ngx-cookieconsent
.
So if your are not happy with the default appearance of the cookie bar, you can totally customize it to better suit your needs. This involves overriding a few options:
Here is a example of a custom layout, that is inspired from the default 'basic' layout , but simply changes the message and links that are displayed in the bar.
import {NgcCookieConsentModule, NgcCookieConsentConfig} from 'ngx-cookieconsent';
const cookieConfig:NgcCookieConsentConfig = {
cookie: {
domain: 'localhost'
},
palette: {
popup: {
background: '#000'
},
button: {
background: '#f1d600'
}
},
theme: 'edgeless',
type: 'opt-out',
layout: 'my-custom-layout',
layouts: {
"my-custom-layout": '{{messagelink}}{{compliance}}'
},
elements:{
messagelink: `
<span id="cookieconsent:desc" class="cc-message">{{message}}
<a aria-label="learn more about cookies" tabindex="0" class="cc-link" href="{{cookiePolicyHref}}" target="_blank" rel="noopener">{{cookiePolicyLink}}</a>,
<a aria-label="learn more about our privacy policy" tabindex="1" class="cc-link" href="{{privacyPolicyHref}}" target="_blank" rel="noopener">{{privacyPolicyLink}}</a> and our
<a aria-label="learn more about our terms of service" tabindex="2" class="cc-link" href="{{tosHref}}" target="_blank" rel="noopener">{{tosLink}}</a>
</span>
`,
},
content:{
message: 'By using our site, you acknowledge that you have read and understand our ',
cookiePolicyLink: 'Cookie Policy',
cookiePolicyHref: 'https://cookie.com',
privacyPolicyLink: 'Privacy Policy',
privacyPolicyHref: 'https://privacy.com',
tosLink: 'Terms of Service',
tosHref: 'https://tos.com',
}
};
@NgModule({
declarations: [AppComponent, ...],
imports: [NgcCookieConsentModule.forRoot(cookieConfig), ...],
bootstrap: [AppComponent]
})
export class AppModule {
}
Compatibility with Angular
Every Nx plugin relies on the underlying Nx Workspace/DevKit it runs on. This table provides the compatibility matrix between major versions of Nx workspace and this plugin.
Library Version | Angular version |
---|
>=v6.0.0 | >=v16.x.x |
>=v5.0.0 | >=v15.x.x |
>=v4.0.1 | >=v14.x.x |
v3.0.1 | >=v12.x.x |
>=v2.2.3 | >=v6.x.x |
v1.1.0 | <v6.x.x |
Credits
ngx-cookieconsent
is built upon Cookie Consent, by Osano
License
Copyright (c) 2018-present Tine Kondo. Licensed under the MIT License (MIT)