Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

angular2-cookie-law

Package Overview
Dependencies
Maintainers
1
Versions
46
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

angular2-cookie-law

Angular2+ component that provides a banner to inform users about cookie law

  • 1.3.1
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
811
decreased by-35.74%
Maintainers
1
Weekly downloads
 
Created
Source

Build Status Build status npm version npm Coverage Status Commitizen friendly semantic-release

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:

Table of contents

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

cookie-law example

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

TypeDefault value
stringnull

If set to a valid absolute or relative URL, it will render an extra 'learn more' link pointing to the link.

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

output with link

target

TypeDefault 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

TypeDefault 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>

name

TypeDefault value
string"cookieLawSeen"

Allows you to decide which name will be used for storing the cookie in the client's browser.

Example
<cookie-law name="myShinyCookieLaw"></cookie-law>

The previous example will generate a myShinyCookieLaw=true as soon as the user dismiss the banner.

expiration

TypeDefault valueDescription
number-Set a the cookie expiration time (in days)
Example
<cookie-law name="myShinyCookieLaw" expiration="7">I'm gonna expire in 1 week!</cookie-law>

Properties

NameTypeDescription
cookieLawSeenbooleantrue 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

NameTypeDescription
isSeenbooleanTriggered 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

NameDescription
dismissDismiss 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>

Angular 4

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.

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

Keywords

FAQs

Package last updated on 05 Jul 2017

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc