Angular Cookie Law is an angular directive that allows your angular application to comply the european cookie law by informing users that your site has cookies. Also provide a service to lock scripts before acceptance (as required by Italian Law - Garante della Privacy dispositions).
Clone or download
Alessandro Sarzina
Latest commit f1efcbf Nov 30, 2018

Angular Cookie Law

Angular cookie law provides:

  • a directive for a popup banner that informs users about cookies
  • a directive that blocks some code or another directive until cookies are accepted
  • a service to block external services (eg. YouTube, Facebook) until cookies are accepted


You can install this package with npm.


npm i @palmabit/angular-cookie-law --save

Add a <script> and <style> to your index.html:

<link rel="stylesheet" href="/node_modules/angular-cookie-law/dist/angular-cookie-law.min.css">

<script src="/node_modules/angular-cookie-law/dist/angular-cookie-law.min.js"></script>


First, you need to inject angular-cookie-law into your angular module.

angular.module('myApp', ['angular-cookie-law']);

CookieLawBanner directive

You could insert this directive at the beginning of <body> tag.

<cookie-law-banner position="top" message="Your custom message" policy-url="http://link-to-your-policy"></cookie-law-banner>

This directive creates a banner that informs users about cookies that contains a button to accept them.


From version 0.2.0, all banner texts are refreshed if one of these attributes change: message, acceptText, declineText, policyText, policyURL.


position: 'top'

Position of the banner (variants: "top", "bottom". default: "top").


message: 'Your custom message'

The message to be shown with banner (default: "We use cookies to track usage and preferences").


acceptButton: true

Show or hide accept button (default: true).


acceptText: 'Your custom text'

The text for accept button (default: "I Understand").


declineButton: false

Show or hide decline button (default: false).


declineText: 'Your custom text'

The text for decline button (default: "Disable Cookies").


policyButton: false

Show or hide policy link button (default: false).


policyText: 'Your custom text'

The text for policy link button (default: "Privacy Policy").


policyURL: '/privacy-policy/'

The URL to show privacy policy (default: "/privacy-policy/").


policyBlank: false

Set true to open privacy policy page in other tab (default: false).


expireDays: 365

Days number for the accept cookie expiration (default: 365).


element: 'body'

Element to append/prepend cookieBar to. Remember . for class or # for id. (default: "body").

CookieLawWait directive


The divs inside <cookie-law-wait> directive is loaded only after cookies are accepted.


This service provides a function to know if cookies are accepted.

First, you need to inject CookieLawService into your angular controller or directive.

angular.module('myApp').controller('MyCtrl', ['CookieLawService']);


This function tells you if cookies are accepted.

CookieLawService.isEnabled(); //true or false


Accept event

The event cookieLaw.accept is triggered when cookies are accepted.

$scope.$on('cookieLaw.accept', function() {
    //callback function

Dismiss event

The event cookieLaw.dismiss is triggered when cookies banner is closed.

$scope.$on('cookieLaw.dismiss', function() {
    //callback function

Decline event

The event cookieLaw.decline is triggered when cookies are declined.

$scope.$on('cookieLaw.decline', function() {
    //callback function

Change the name of the cookie

To change the name of the cookie, simply add the following line to your code.

angular.module('angular-cookie-law').value('cookieLawName', 'cookieMessage');



The MIT License (MIT). Please see License File for more information.