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

Table of contents

• Installation
• Setup
• Usage
• Example
• Demo App
• Options
• 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"
  },
  "packages": {
      "angular2-cookie-law": {
        "main": "bundles/angular2-cookie-law.umd.js",
        "defaultExtension": "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

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.

eg.

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

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