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
Install
You can install this package with npm.
npm
npm i @palmabit/angular-cookie-law --saveAdd 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>Usage
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.
Options
From version 0.2.0, all banner texts are refreshed if one of these attributes change: message, acceptText, declineText, policyText, policyURL.
position
position: 'top'
Position of the banner (variants: "top", "bottom". default: "top").
message
message: 'Your custom message'
The message to be shown with banner (default: "We use cookies to track usage and preferences").
acceptButton
acceptButton: true
Show or hide accept button (default: true).
acceptText
acceptText: 'Your custom text'
The text for accept button (default: "I Understand").
declineButton
declineButton: false
Show or hide decline button (default: false).
declineText
declineText: 'Your custom text'
The text for decline button (default: "Disable Cookies").
policyButton
policyButton: false
Show or hide policy link button (default: false).
policyText
policyText: 'Your custom text'
The text for policy link button (default: "Privacy Policy").
policyURL
policyURL: '/privacy-policy/'
The URL to show privacy policy (default: "/privacy-policy/").
policyBlank
policyBlank: false
Set true to open privacy policy page in other tab (default: false).
expireDays
expireDays: 365
Days number for the accept cookie expiration (default: 365).
element
element: 'body'
Element to append/prepend cookieBar to. Remember . for class or # for id. (default: "body").
CookieLawWait directive
<cookie-law-wait>
<div>...</div>
</cookie-law-wait>The divs inside <cookie-law-wait> directive is loaded only after cookies are accepted.
CookieLawService
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']);isEnabled
This function tells you if cookies are accepted.
CookieLawService.isEnabled(); //true or falseEvents
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');
Author
License
The MIT License (MIT). Please see License File for more information.