angular2-cookie-law

angular2-cookie-law

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

Plunker DEMO available here

Table of contents

• Installation
• Setup
• Usage
• Example
• Demo App
• Options
• Attributes
• Properties
• Events
• Methods
• Custom template
• Contributing
• Changelog
• License

Installation

1. 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

Setup

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 { }

Usage

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  { }

Example

// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app',
  template: `
    <h1>
      Hello World!
    </h1>

    <cookie-law></cookie-law>
  `
})
export class AppComponent  { }

Output

Demo App

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.

Options

Attributes

learnMore

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.

eg.

<cookie-law learnMore="/learn-more"></cookie-law>

Output

target

Type	Default value
string	_blank

Set to _self if you want the external link not to be opened in a new tab.

Example

<cookie-law learnMore="/learn-more" target="_self"></cookie-law>

position

Type	Default value
string	"bottom"

Allows you to decide where in the page, the banner will be rendered. Possible values are: "bottom" and "top".

Example

<cookie-law position="top" learnMore="/learn-more" target="_self"></cookie-law>

Properties

| Name | Type | Description | | cookieLawSeen | boolean | true if the user has already dismissed the banner

Example

@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;
  }
}

Events

Name	Type	Description
isSeen	boolean	Triggered when the user dismiss the banner

Example

@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;
  }
}

Methods

| Name | Description | | --- | --- | --- | | dismiss | Dismiss a banner

Example

@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();
  }
}

Custom template

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>

Contributing

This package is using the AngularJS commit messages as default way to contribute with commitizen node package integrated in this repository.

1. Fork it!
2. Create your feature branch: git checkout -b my-new-feature
3. Add your changes: git add .
4. Commit your changes: npm run commit
5. Push to the branch: git push origin my-new-feature
6. Submit a pull request :sunglasses:

Changelog

Changelog available here

License

MIT License © Andrea SonnY