{"id":16618494,"url":"https://github.com/andreasonny83/angular2-cookie-law","last_synced_at":"2025-07-03T03:06:11.047Z","repository":{"id":15218727,"uuid":"77162583","full_name":"andreasonny83/angular2-cookie-law","owner":"andreasonny83","description":"Angular2+ component that provides a banner to inform users about cookie law","archived":false,"fork":false,"pushed_at":"2023-01-04T04:59:36.000Z","size":1264,"stargazers_count":37,"open_issues_count":35,"forks_count":24,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-05-30T05:07:47.601Z","etag":null,"topics":["angular-components","angular2","angular2-component","angular2-components","angular2-cookie","angular4","angular6","angularjs","animation","banner","cookies","ng2","ng4"],"latest_commit_sha":null,"homepage":"https://stackblitz.com/edit/angular2-cookie-law","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/andreasonny83.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-12-22T17:12:58.000Z","updated_at":"2023-04-15T07:53:49.000Z","dependencies_parsed_at":"2023-01-13T18:19:01.305Z","dependency_job_id":null,"html_url":"https://github.com/andreasonny83/angular2-cookie-law","commit_stats":null,"previous_names":[],"tags_count":44,"template":false,"template_full_name":null,"purl":"pkg:github/andreasonny83/angular2-cookie-law","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andreasonny83%2Fangular2-cookie-law","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andreasonny83%2Fangular2-cookie-law/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andreasonny83%2Fangular2-cookie-law/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andreasonny83%2Fangular2-cookie-law/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/andreasonny83","download_url":"https://codeload.github.com/andreasonny83/angular2-cookie-law/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andreasonny83%2Fangular2-cookie-law/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263250601,"owners_count":23437288,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular-components","angular2","angular2-component","angular2-components","angular2-cookie","angular4","angular6","angularjs","animation","banner","cookies","ng2","ng4"],"created_at":"2024-10-12T02:20:23.551Z","updated_at":"2025-07-03T03:06:11.024Z","avatar_url":"https://github.com/andreasonny83.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Maintainers Wanted\n\nThis project was originally intended to be only consumed by my NG applications. \nI'm now working full-time on React related project only and it's been a while since I did look into Angular related code.\n\nHowever, since there are now several people relying on this small and simple package, I'm looking for volunteers to actiely look after this project.\nIf anyone is interested, please reply into [this ticket](https://github.com/andreasonny83/angular2-cookie-law/issues/63).\n\n[![Build Status](https://travis-ci.org/andreasonny83/angular2-cookie-law.svg?branch=master)](https://travis-ci.org/andreasonny83/angular2-cookie-law)\n[![npm version](https://badge.fury.io/js/angular2-cookie-law.svg)](https://badge.fury.io/js/angular2-cookie-law)\n[![npm](https://img.shields.io/npm/dt/angular2-cookie-law.svg)](https://www.npmjs.com/package/angular2-cookie-law)\n[![Coverage Status](https://coveralls.io/repos/github/andreasonny83/angular2-cookie-law/badge.svg)](https://coveralls.io/github/andreasonny83/angular2-cookie-law)\n[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)\n[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)\n\n# Angular2 Cookie Law\n\n\u003e Angular2+ component that provides a banner to inform users about the cookie law now with Angular Universal support\n\nAngular2 Cookie Law is an HTML `\u003ccookie-law\u003e` tag enhanced with styling and animation.\n\n**This documentation is for the latest version of `angular2-cookie-law` (\u003e=6.x.x).**\n\n**angular2-cookie-law@7 supports bot Angular v6 and v7**\n\nIf you're using an older version of Angular (\u003c6), please install `angular2-cookie-law`\nin version 1 with\n`npm i --save angular2-cookie-law@1`\nand check out the documentation available [here](https://github.com/andreasonny83/angular2-cookie-law/tree/v1.4.0).\n\n**Live DEMO:**\n\n*   [Angular2 Cookie Law with Angular 6](https://stackblitz.com/edit/angular2-cookie-law)\n*   [Angular2 Cookie Law with Angular 7](https://stackblitz.com/edit/angular2-cookie-law-ng7)\n\n## Table of contents\n\n* [Installation](#installation)\n* [Setup](#setup)\n* [Usage](#usage)\n* [Example](#example)\n* [Demo App](#demo-app)\n* [Options](#options)\n  * [Attributes](#attributes)\n  * [Properties](#properties)\n  * [Events](#events)\n  * [Methods](#methods)\n* [Custom template](#custom-template)\n* [Contributing](#contributing)\n* [Changelog](#changelog)\n* [License](#license)\n\n## Installation\n\n1.  Install the component using `npm`\n1.  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 the `BrowserAnimationsModule` in your app.\n\n  ```bash\n  # To get the latest stable version and update package.json file:\n  $ npm install angular2-cookie-law@6 @angular/animations --save\n  ```\n\n  or `yarn` with:\n\n  ```bash\n  $ yarn add angular2-cookie-law @angular/animations\n  ```\n\n## Setup\n\nangular2-cookie-law class is an Angular module therefore,\nit needs to be registered in the modules array (encouraged way):\n\n```js\n// app.module.ts\nimport { NgModule } from '@angular/core';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { BrowserAnimationsModule } from '@angular/platform-browser/animations';\nimport { CookieLawModule } from 'angular2-cookie-law';\nimport { AppComponent } from './app.component';\n\n@NgModule({\n  declarations: [ AppComponent ],\n  imports: [\n    BrowserModule,\n    BrowserAnimationsModule, // BrowserAnimationsModule is required\n    CookieLawModule // import Angular's CookieLaw modules\n  ],\n  bootstrap: [ AppComponent ]\n})\nexport class AppModule { }\n```\n\n## Usage\n\nUse the component anywhere around your application:\n\n```js\n// app.component.ts\nimport { Component } from '@angular/core';\n\n@Component({\n  selector: 'app',\n  template: `\n    \u003ccookie-law\u003e\u003c/cookie-law\u003e\n  `\n})\nexport class AppComponent  { }\n```\n\n## Example\n\n```js\n// app.component.ts\nimport { Component } from '@angular/core';\n\n@Component({\n  selector: 'app',\n  template: `\n    \u003ch1\u003e\n      Hello World!\n    \u003c/h1\u003e\n\n    \u003ccookie-law\u003e\u003c/cookie-law\u003e\n  `\n})\nexport class AppComponent  { }\n```\n\n###### Output\n\n![cookie-law example](http://i.imgur.com/W9LUdwy.png)\n\n# Demo App\n\nHave a look at the demo app available in this repository for a real Angular application using the `angular2-Cookie-Law` library.\nClone this repo on you machine with\n\n```sh\n$ git clone git@github.com:andreasonny83/angular2-cookie-law.git\n```\n\nThen install all the Node dependencies (Node v8 or later is required).\n\n```sh\n$ npm install\n```\n\nAnd run the project with:\n\n```bash\n$ npm start\n```\n\nOpen your browser to [http://localhost:4200/](http://localhost:4200/)\nto see the application running.\n\n## Options\n\n## Attributes\n\n### learnMore\n\n| Type | Default value |\n| --- | --- |\n| string | null |\n\nIf set to a valid absolute or relative URL, it will render an extra 'learn more' link pointing to the link.\n\n###### Example\n\n```html\n\u003ccookie-law learnMore=\"/learn-more\"\u003e\u003c/cookie-law\u003e\n```\n\n![output with link](http://i.imgur.com/0nvb6sP.png)\n\n### awsomeCloseIcon\n\nFont Awsome is required in your header for this feature to work.\n\n```html\n\u003cscript defer src=\"https://use.fontawesome.com/releases/v5.0.6/js/all.js\"\u003e\u003c/script\u003e\n```\n\n| Type | Default value |\n| --- | --- |\n| string | null |\n\nIf set to a Font awsome Icon e.g. \"fa-window-close\" it will replace the standard SVG with the Font awsome Icon.\n\n###### Example\n\n```html\n\u003ccookie-law awsomeCloseIcon=\"fa-window-close\"\u003e\u003c/cookie-law\u003e\n```\n\n### target\n\n| Type | Default value |\n| --- | --- |\n| string | _blank |\n\nSet to `_self` if you want the external link not to be opened in a new tab.\n\n###### Example\n\n```html\n\u003ccookie-law learnMore=\"/learn-more\" target=\"_self\"\u003e\u003c/cookie-law\u003e\n```\n\n### position\n\n| Type | Default value |\n| --- | --- |\n| string | \"bottom\" |\n\nAllows you to decide where in the page, the banner will be rendered.\nPossible values are: `\"bottom\"` and `\"top\"`.\n\n###### Example\n\n```html\n\u003ccookie-law position=\"top\" learnMore=\"/learn-more\" target=\"_self\"\u003e\u003c/cookie-law\u003e\n```\n\n### name\n\n| Type | Default value |\n| --- | --- |\n| string | \"cookieLawSeen\" |\n\nAllows you to decide which name will be used for storing the cookie in the client's browser.\n\n###### Example\n\n```html\n\u003ccookie-law name=\"myShinyCookieLaw\"\u003e\u003c/cookie-law\u003e\n```\n\nThe previous example will generate a `myShinyCookieLaw=true` as soon as the user dismiss the banner.\n\n### expiration\n\n| Type | Default value | Description |\n| --- | --- | --- |\n| number | - | Set a the cookie expiration time (in days) |\n\n###### Example\n\n```html\n\u003ccookie-law name=\"myShinyCookieLaw\" expiration=\"7\"\u003eI'm gonna expire in 1 week!\u003c/cookie-law\u003e\n```\n\n## Properties\n\n| Name | Type | Description |\n| --- | --- | --- |\n| cookieLawSeen | boolean | true if the user has already dismissed the banner |\n\n###### Example\n\n```js\n@Component({\n  selector: 'demo-app',\n  template: `\n    \u003ch3 *ngIf=\"cookieLawSeen\"\u003eCookie law has been dismissed\u003c/h3\u003e\n\n    \u003ccookie-law #cookieLaw\u003e\u003c/cookie-law\u003e\n\n  `,\n})\nexport class AppComponent implements OnInit {\n  @ViewChild('cookieLaw')\n  private cookieLawEl: any;\n\n  private cookieLawSeen: boolean;\n\n  ngOnInit() {\n    this.cookieLawSeen = this.cookieLawEl.cookieLawSeen;\n  }\n}\n```\n\n## Events\n\n| Name | Type | Description |\n| --- | --- | --- |\n| isSeen | boolean | Triggered when the user dismiss the banner |\n\n###### Example\n\n```js\n@Component({\n  selector: 'demo-app',\n  template: `\n    \u003ch3 *ngIf=\"cookieLawSeen\"\u003eCookie law has been dismissed\u003c/h3\u003e\n\n    \u003ccookie-law (isSeen)=\"seen($event)\"\u003e\u003c/cookie-law\u003e\n  `,\n})\nexport class AppComponent {\n  private cookieLawSeen: boolean;\n\n  public seen(evt: any) {\n    this.cookieLawSeen = evt;\n  }\n}\n```\n\n## Methods\n\n| Name | Description |\n| --- | --- |\n| dismiss | Dismiss a banner |\n\n###### Example\n\n```js\n@Component({\n  selector: 'demo-app',\n  template: `\n  \u003cbutton type=\"button\" (click)=\"dismiss()\"\u003eDismiss Modal\u003c/button\u003e\n  \u003ccookie-law #cookieLaw\u003e\u003c/cookie-law\u003e\n\n  `,\n})\nexport class AppComponent implements OnInit {\n  @ViewChild('cookieLaw')\n  private cookieLawEl: any;\n\n  public dismiss(): void {\n    this.cookieLawEl.dismiss();\n  }\n}\n```\n\n## Custom template\n\nIt is possible to overwrite our default cookie policy law text with a\ncustom template.\nJust put your favorite html content between the component like in the\nfollowing example:\n```html\n\u003ccookie-law position=\"top\"\u003e\n  This website contains cookie.\n  \u003ca href=\"#/cookie-policy\"\u003eRead more\u003c/a\u003e\n\u003c/cookie-law\u003e\n```\n\n## Contributing\n\nThis package is using the AngularJS commit messages as default way to contribute\nwith Commitizen node package integrated in this repository.\n\n1.  Fork it!\n1.  Create your feature branch: `git checkout -b my-new-feature`\n1.  Add your changes: `git add .`\n1.  Commit your changes: `npm run commit`\n1.  Push to the branch: `git push origin my-new-feature`\n1.  Submit a pull request :sunglasses:\n\n## Changelog\n\nChangelog available [here](https://github.com/andreasonny83/angular2-cookie-law/releases)\n\n## License\n\n[MIT License](https://github.com/andreasonny83/angular2-cookie-law/blob/master/LICENSE) © Andrea SonnY\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandreasonny83%2Fangular2-cookie-law","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fandreasonny83%2Fangular2-cookie-law","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandreasonny83%2Fangular2-cookie-law/lists"}