Repository files navigation

This project was originally intended to be only consumed by my NG applications.I'm now working full-time on React related project only and it's been a while since I did look into Angular related code.

However, since there are now several people relying on this small and simple package, I'm looking for volunteers to actiely look after this project.If anyone is interested, please reply intothis ticket.

Angular2+ component that provides a banner to inform users about the cookie law now with Angular Universal support

Angular2 Cookie Law is an HTML<cookie-law> tag enhanced with styling and animation.

This documentation is for the latest version ofangular2-cookie-law (>=6.x.x).

angular2-cookie-law@7 supports bot Angular v6 and v7

If you're using an older version of Angular (<6), please installangular2-cookie-lawin version 1 withnpm i --save angular2-cookie-law@1and check out the documentation availablehere.

Live DEMO:

• Angular2 Cookie Law with Angular 6
• Angular2 Cookie Law with Angular 7

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

1. Install the component usingnpm
2. angular2-cookie-law depends on the Angular animations module in order to be able to do more advanced transitions. If you want these animations to work in your app, you have to install the@angular/animations module and include theBrowserAnimationsModule in your app.

# To get the latest stable version and update package.json file:$ npm install angular2-cookie-law@6 @angular/animations --save

oryarn with:

$ yarn add angular2-cookie-law @angular/animations

angular2-cookie-law class is an Angular module therefore,it needs to be registered in the modules array (encouraged way):

// app.module.tsimport{NgModule}from'@angular/core';import{BrowserModule}from'@angular/platform-browser';import{BrowserAnimationsModule}from'@angular/platform-browser/animations';import{CookieLawModule}from'angular2-cookie-law';import{AppComponent}from'./app.component';@NgModule({declarations:[AppComponent],imports:[BrowserModule,BrowserAnimationsModule,// BrowserAnimationsModule is requiredCookieLawModule// import Angular's CookieLaw modules],bootstrap:[AppComponent]})exportclassAppModule{}

Use the component anywhere around your application:

// app.component.tsimport{Component}from'@angular/core';@Component({selector:'app',template:`    <cookie-law></cookie-law>  `})exportclassAppComponent{}

// app.component.tsimport{Component}from'@angular/core';@Component({selector:'app',template:`    <h1>      Hello World!    </h1>    <cookie-law></cookie-law>  `})exportclassAppComponent{}

Have a look at the demo app available in this repository for a real Angular application using theangular2-Cookie-Law library.Clone this repo on you machine with

$ git clone git@github.com:andreasonny83/angular2-cookie-law.git

Then install all the Node dependencies (Node v8 or later is required).

$ npm install

And run the project with:

$ npm start

Open your browser tohttp://localhost:4200/to see the application running.

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

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

Font Awsome is required in your header for this feature to work.

<scriptdefersrc="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>

If set to a Font awsome Icon e.g. "fa-window-close" it will replace the standard SVG with the Font awsome Icon.

<cookie-lawawsomeCloseIcon="fa-window-close"></cookie-law>

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

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

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

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

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

<cookie-lawname="myShinyCookieLaw"></cookie-law>

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

<cookie-lawname="myShinyCookieLaw"expiration="7">I'm gonna expire in 1 week!</cookie-law>

@Component({selector:'demo-app',template:`    <h3 *ngIf="cookieLawSeen">Cookie law has been dismissed</h3>    <cookie-law #cookieLaw></cookie-law>  `,})exportclassAppComponentimplementsOnInit{  @ViewChild('cookieLaw')privatecookieLawEl:any;privatecookieLawSeen:boolean;ngOnInit(){this.cookieLawSeen=this.cookieLawEl.cookieLawSeen;}}

@Component({selector:'demo-app',template:`    <h3 *ngIf="cookieLawSeen">Cookie law has been dismissed</h3>    <cookie-law (isSeen)="seen($event)"></cookie-law>  `,})exportclassAppComponent{privatecookieLawSeen:boolean;publicseen(evt:any){this.cookieLawSeen=evt;}}

@Component({selector:'demo-app',template:`  <button type="button" (click)="dismiss()">Dismiss Modal</button>  <cookie-law #cookieLaw></cookie-law>  `,})exportclassAppComponentimplementsOnInit{  @ViewChild('cookieLaw')privatecookieLawEl:any;publicdismiss():void{this.cookieLawEl.dismiss();}}

It is possible to overwrite our default cookie policy law text with acustom template.Just put your favorite html content between the component like in thefollowing example:

<cookie-lawposition="top">  This website contains cookie.<ahref="#/cookie-policy">Read more</a></cookie-law>

This package is using the AngularJS commit messages as default way to contributewith 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 😎

Changelog availablehere

MIT License © Andrea SonnY