Research
Security News
Quasar RAT Disguised as an npm Package for Detecting Vulnerabilities in Ethereum Smart Contracts
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
angular2-cookie-law
Advanced tools
Angular2+ component that provides a banner to inform users about 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.
This documentation is for the latest version of angular2-cookie-law
(6.x.x).
If you're using an older version of Angular (<6), please install angular2-cookie-law
in version 1 with
npm i --save angular2-cookie-law@1
and check out the documentation available here.
Live DEMO:
npm
@angular/animations
module and include the BrowserAnimationsModule
in your app.# To get the latest stable version and update package.json file:
$ npm install angular2-cookie-law@6 @angular/animations --save
or yarn
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.ts
import { 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 required
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 app available in this repository for a real Angular application using the angular2-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 to http://localhost:4200/ 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>
Font Awsome is required in your header for this feature to work.
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
Type | Default value |
---|---|
string | null |
If set to a Font awsome Icon e.g. "fa-window-close" it will replace the standard SVG with the Font awsome Icon.
<cookie-law awsomeCloseIcon="fa-window-close"></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 package is using the AngularJS commit messages as default way to contribute with Commitizen node package integrated in this repository.
git checkout -b my-new-feature
git add .
npm run commit
git push origin my-new-feature
Changelog available here
MIT License © Andrea SonnY
FAQs
Angular2+ component that provides a banner to inform users about cookie law
The npm package angular2-cookie-law receives a total of 680 weekly downloads. As such, angular2-cookie-law popularity was classified as not popular.
We found that angular2-cookie-law demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
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.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.