Angular2+ component that provides a banner to inform users about the cookie law
Angular2 Cookie Law is an HTML <cookie-law>
tag enhanced with styling and animation
now compatible with Angular4 too.
Plunker DEMOs:
- Installation
- Setup
- Usage
- Example
- Demo App
- Options
- Custom template
- Angular 4
- Contributing
- Changelog
- License
- Install the component using
npm
:
# To get the latest stable version and update package.json file:
$ npm install angular2-cookie-law --save
or yarn
with:
$ yarn add angular2-cookie-law
If you are using System.js you may want to add this into map
and package
config:
{
"map": {
"angular2-cookie-law": "node_modules/angular2-cookie-law/bundles/angular2-cookie-law.umd.js"
}
}
If you are using Webpack you may want to add this into your vendor.js
file:
// vendor.ts
import '@angular/platform-browser';
import '@angular/platform-browser-dynamic';
import '@angular/core';
import '@angular/common';
import '@angular/http';
// Third parties packages
import 'rxjs';
import 'angular2-cookie-law';
angular2-cookie-law class is an Angular2 module therefore, it needs to be registered in the modules array (encouraged way):
// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { CookieLawModule } from 'angular2-cookie-law';
import { AppComponent } from './app.component';
@NgModule({
declarations: [ AppComponent ],
imports: [
BrowserModule,
CookieLawModule // import Angular's CookieLaw modules
],
bootstrap: [ AppComponent ]
})
export class AppModule { }
Use the component anywhere around your application:
// app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app',
template: `
<cookie-law></cookie-law>
`
})
export class AppComponent { }
// app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app',
template: `
<h1>
Hello World!
</h1>
<cookie-law></cookie-law>
`
})
export class AppComponent { }
Have a look at the demo
available in this repository for a real Angular2 application using the Angular2-Cookie-Law
library.
$ npm run demo
Open your browser to http://localhost:9007/ to see the application running.
Type | Default value |
---|---|
string | null |
If set to a valid absolute or relative URL, it will render an extra 'learn more' link pointing to the link.
<cookie-law learnMore="/learn-more"></cookie-law>
Type | Default value |
---|---|
string | _blank |
Set to _self
if you want the external link not to be opened in a new tab.
<cookie-law learnMore="/learn-more" target="_self"></cookie-law>
Type | Default value |
---|---|
string | "bottom" |
Allows you to decide where in the page, the banner will be rendered.
Possible values are: "bottom"
and "top"
.
<cookie-law position="top" learnMore="/learn-more" target="_self"></cookie-law>
Type | Default value |
---|---|
string | "cookieLawSeen" |
Allows you to decide which name will be used for storing the cookie in the client's browser.
<cookie-law name="myShinyCookieLaw"></cookie-law>
The previous example will generate a myShinyCookieLaw=true
as soon as the user dismiss the banner.
Type | Default value | Description |
---|---|---|
number | - | Set a the cookie expiration time (in days) |
<cookie-law name="myShinyCookieLaw" expiration="7">I'm gonna expire in 1 week!</cookie-law>
Name | Type | Description |
---|---|---|
cookieLawSeen | boolean | true if the user has already dismissed the banner |
@Component({
selector: 'demo-app',
template: `
<h3 *ngIf="cookieLawSeen">Cookie law has been dismissed</h3>
<cookie-law #cookieLaw></cookie-law>
`,
})
export class AppComponent implements OnInit {
@ViewChild('cookieLaw')
private cookieLawEl: any;
private cookieLawSeen: boolean;
ngOnInit() {
this.cookieLawSeen = this.cookieLawEl.cookieLawSeen;
}
}
Name | Type | Description |
---|---|---|
isSeen | boolean | Triggered when the user dismiss the banner |
@Component({
selector: 'demo-app',
template: `
<h3 *ngIf="cookieLawSeen">Cookie law has been dismissed</h3>
<cookie-law (isSeen)="seen($event)"></cookie-law>
`,
})
export class AppComponent {
private cookieLawSeen: boolean;
public seen(evt: any) {
this.cookieLawSeen = evt;
}
}
Name | Description |
---|---|
dismiss | Dismiss a banner |
@Component({
selector: 'demo-app',
template: `
<button type="button" (click)="dismiss()">Dismiss Modal</button>
<cookie-law #cookieLaw></cookie-law>
`,
})
export class AppComponent implements OnInit {
@ViewChild('cookieLaw')
private cookieLawEl: any;
public dismiss(): void {
this.cookieLawEl.dismiss();
}
}
It is possible to overwrite our default cookie policy law text with a custom template. Just put your favorite html content between the component like in the following example:
<cookie-law position="top">
This website contains cookie.
<a =href="#/cookie-policy">Read more</a>
</cookie-law>
This module will work with Angular 4 projects but will require @angular/animations
to be included in your project as the Angular animations are not part of the @angular/core
library starting from the version >=4.
Make sure to include the BrowserAnimationsModule
in your App module like in the following example:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@NgModule({
bootstrap: [ AppComponent ],
declarations: [
AppComponent,
],
imports: [
BrowserModule,
BrowserAnimationsModule, // Angular 4 Only
],
})
export class AppModule { }
Also have a look at this Angular2 Cookie Law with Angular4 Plunker version for a live SystemJS example.
This package is using the AngularJS commit messages as default way to contribute with Commitizen node package integrated in this repository.
- Fork it!
- Create your feature branch:
git checkout -b my-new-feature
- Add your changes:
git add .
- Commit your changes:
npm run commit
- Push to the branch:
git push origin my-new-feature
- Submit a pull request ๐
Changelog available here
MIT License ยฉ Andrea SonnY