{"id":13410664,"url":"https://github.com/tinesoft/ngx-cookieconsent","last_synced_at":"2025-04-09T18:22:24.716Z","repository":{"id":24919555,"uuid":"93906340","full_name":"tinesoft/ngx-cookieconsent","owner":"tinesoft","description":"Cookie :cookie: Consent module for Angular.","archived":false,"fork":false,"pushed_at":"2024-07-24T08:49:27.000Z","size":4803,"stargazers_count":162,"open_issues_count":24,"forks_count":35,"subscribers_count":6,"default_branch":"develop","last_synced_at":"2024-10-19T21:19:11.856Z","etag":null,"topics":["angular","cookie","cookie-consent","eu","hacktoberfest","law"],"latest_commit_sha":null,"homepage":"https://tinesoft.github.io/ngx-cookieconsent/","language":"HTML","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/tinesoft.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"tinesoft","patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"custom":null}},"created_at":"2017-06-10T00:32:02.000Z","updated_at":"2024-10-18T11:03:48.000Z","dependencies_parsed_at":"2024-11-13T04:03:05.106Z","dependency_job_id":"70056ba9-fb0e-4528-8fae-efcf5defe4ca","html_url":"https://github.com/tinesoft/ngx-cookieconsent","commit_stats":{"total_commits":139,"total_committers":13,"mean_commits":"10.692307692307692","dds":"0.19424460431654678","last_synced_commit":"b8edcbf08ba067b74b179abe279eaf90a01a4a70"},"previous_names":[],"tags_count":18,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tinesoft%2Fngx-cookieconsent","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tinesoft%2Fngx-cookieconsent/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tinesoft%2Fngx-cookieconsent/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tinesoft%2Fngx-cookieconsent/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tinesoft","download_url":"https://codeload.github.com/tinesoft/ngx-cookieconsent/tar.gz/refs/heads/develop","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248085711,"owners_count":21045197,"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","cookie","cookie-consent","eu","hacktoberfest","law"],"created_at":"2024-07-30T20:01:08.282Z","updated_at":"2025-04-09T18:22:24.688Z","avatar_url":"https://github.com/tinesoft.png","language":"HTML","funding_links":["https://github.com/sponsors/tinesoft"],"categories":["HTML","Third Party Components"],"sub_categories":["Cookies"],"readme":"\n# ngx-cookieconsent\n\n[![npm version](https://badge.fury.io/js/ngx-cookieconsent.svg)](https://badge.fury.io/js/ngx-cookieconsent)\n[![Build Status](https://travis-ci.org/tinesoft/ngx-cookieconsent.svg?branch=master)](https://travis-ci.org/tinesoft/ngx-cookieconsent)\n[![Coverage Status](https://coveralls.io/repos/github/tinesoft/ngx-cookieconsent/badge.svg?branch=master)](https://coveralls.io/github/tinesoft/ngx-cookieconsent?branch=master)\n[![Known Vulnerabilities](https://snyk.io/test/github/tinesoft/ngx-cookieconsent/master/badge.svg)](https://snyk.io/test/github/tinesoft/ngx-cookieconsent)\n\n\u003e [Cookie Consent](https://cookieconsent.insites.com/) module for Angular\n\n\u003cp align=\"center\"\u003e\n  \u003cimg height=\"256px\" width=\"256px\" style=\"text-align: center;\" src=\"https://raw.githubusercontent.com/tinesoft/ngx-cookieconsent/master/apps/demo/src/assets/logo.svg\"\u003e\n\u003c/p\u003e\n\n## Demo\n\nView the module in action at https://tinesoft.github.io/ngx-cookieconsent\n\n## Dependencies\n\n* [Angular](https://angular.io) (see  [Compatibility Matrix ](#compatibility-with-angular) below)\n* [Cookie Consent](https://cookieconsent.insites.com/) (*requires* Cookie Consent 3 or higher, tested with 3.1.0)\n\n## Installation\n\nInstall `Cookie Consent` dependency:\n\n```shell\nnpm install --save cookieconsent\n\n// or \n\nyarn add cookieconsent\n```\n\nNow install `ngx-cookieconsent` via:\n\n```shell\nnpm install --save ngx-cookieconsent\n\n// or\n\nyarn add ngx-cookieconsent\n```\n\n\u003e**Note**: If you are using `Angular CLI` or `Nx CLI` to build your app, make sure that `cookieconsent` is properly listed as a [global library](https://github.com/angular/angular-cli/wiki/stories-global-scripts), and as [global style](https://github.com/angular/angular-cli/wiki/stories-global-styles).\n\nTo do so, edit your `angular.json` (or `project.json` for Nx CLI based apps) as such:\n```\n      \"scripts\": [\n        \"node_modules/cookieconsent/build/cookieconsent.min.js\"\n      ],\n\n      \"styles\": [\n        \"node_modules/cookieconsent/build/cookieconsent.min.css\"\n      ],\n\n```\n\n## Configuration\n\nPrepare the config:\n\n```ts\nimport {NgcCookieConsentConfig} from 'ngx-cookieconsent';\n\nconst cookieConfig:NgcCookieConsentConfig = {\n  cookie: {\n    domain: 'localhost' // or 'your.domain.com' // it is mandatory to set a domain, for cookies to work properly (see https://goo.gl/S2Hy2A)\n  },\n  palette: {\n    popup: {\n      background: '#000'\n    },\n    button: {\n      background: '#f1d600'\n    }\n  },\n  theme: 'edgeless',\n  type: 'opt-out'\n};\n\n```\n\n#### For Angular Standalone API-based apps\n\nIf you are using [Angular Standalone](https://angular.io/guide/standalone-components) API to bootstrap your application, you can configure the library by leveraging the new `provideNgcCookieConsent(config)` helper (added since `v5.x.x`), as such:\n\n```ts\nimport {provideNgcCookieConsent} from 'ngx-cookieconsent';\n\n//...\n\nbootstrapApplication(AppComponent, {\n  providers: [\n    provideNgcCookieConsent(cookieConfig),\n    // ...\n  ]\n});\n```\n\n#### For Angular (ng)Module-based apps\n\nFor traditional ngModule-based angular application, you need to import the library module in your application module, as such:\n\n```ts\nimport {NgcCookieConsentModule} from 'ngx-cookieconsent';\n\n//...\n\n@NgModule({\n  declarations: [AppComponent, ...],\n  imports: [NgcCookieConsentModule.forRoot(cookieConfig), ...],  \n  bootstrap: [AppComponent]\n})\nexport class AppModule {\n}\n```\n\nOther modules in your application can simply import `NgcCookieConsentModule`:\n\n```ts\nimport {NgcCookieConsentModule} from 'ngx-cookieconsent';\n\n@NgModule({\n  declarations: [OtherComponent, ...],\n  imports: [NgcCookieConsentModule, ...], \n})\nexport class OtherModule {\n}\n```\n\n## Usage\n\nInject the `NgcCookieContentService` in your main component (i.e. `AppComponent`) to show the cookie consent popup after the component is loaded. You don't need to explicitly call its `init()` method (done automatically when the service's constructor gets called upon instantiation By Angular).\n\nAlso, you can use the injected `NgcCookieContentService` to update the config (using `init()`), subscribe to events and do stuff like disabling cookies or other.\n\nHere is how it works:\n\n```ts\nimport { Component, OnInit, OnDestroy } from '@angular/core';\nimport { NgcCookieConsentService } from 'ngx-cookieconsent';\nimport { Subscription }   from 'rxjs';\n\n@Component({\n  selector: 'app-root',\n  templateUrl: './app.component.html',\n  styleUrls: ['./app.component.scss']\n})\nexport class AppComponent implements OnInit, OnDestroy {\n\n  //keep refs to subscriptions to be able to unsubscribe later\n  private popupOpenSubscription!: Subscription;\n  private popupCloseSubscription!: Subscription;\n  private initializingSubscription!: Subscription;\n  private initializedSubscription!: Subscription;\n  private initializationErrorSubscription!: Subscription;\n  private statusChangeSubscription!: Subscription;\n  private revokeChoiceSubscription!: Subscription;\n  private noCookieLawSubscription!: Subscription;\n\n  constructor(private ccService: NgcCookieConsentService){}\n\n  ngOnInit() {\n    // subscribe to cookieconsent observables to react to main events\n    this.popupOpenSubscription = this.ccService.popupOpen$.subscribe(\n      () =\u003e {\n        // you can use this.ccService.getConfig() to do stuff...\n      });\n\n    this.popupCloseSubscription = this.ccService.popupClose$.subscribe(\n      () =\u003e {\n        // you can use this.ccService.getConfig() to do stuff...\n      });\n\n    this.initializingSubscription = this.ccService.initializing$.subscribe(\n      (event: NgcInitializingEvent) =\u003e {\n        // the cookieconsent is initilializing... Not yet safe to call methods like `NgcCookieConsentService.hasAnswered()`\n        console.log(`initializing: ${JSON.stringify(event)}`);\n      });\n    \n    this.initializedSubscription = this.ccService.initialized$.subscribe(\n      () =\u003e {\n        // the cookieconsent has been successfully initialized.\n        // It's now safe to use methods on NgcCookieConsentService that require it, like `hasAnswered()` for eg...\n        console.log(`initialized: ${JSON.stringify(event)}`);\n      });\n\n    this.initializationErrorSubscription = this.ccService.initializationError$.subscribe(\n      (event: NgcInitializationErrorEvent) =\u003e {\n        // the cookieconsent has failed to initialize... \n        console.log(`initializationError: ${JSON.stringify(event.error?.message)}`);\n      });\n\n    this.statusChangeSubscription = this.ccService.statusChange$.subscribe(\n      (event: NgcStatusChangeEvent) =\u003e {\n        // you can use this.ccService.getConfig() to do stuff...\n      });\n\n    this.revokeChoiceSubscription = this.ccService.revokeChoice$.subscribe(\n      () =\u003e {\n        // you can use this.ccService.getConfig() to do stuff...\n      });\n\n      this.noCookieLawSubscription = this.ccService.noCookieLaw$.subscribe(\n      (event: NgcNoCookieLawEvent) =\u003e {\n        // you can use this.ccService.getConfig() to do stuff...\n      });\n  }\n\n  ngOnDestroy() {\n    // unsubscribe to cookieconsent observables to prevent memory leaks\n    this.popupOpenSubscription.unsubscribe();\n    this.popupCloseSubscription.unsubscribe();\n    this.initializingSubscription.unsubscribe();\n    this.initializedSubscription.unsubscribe();\n    this.initializationErrorSubscription.unsubscribe();\n    this.statusChangeSubscription.unsubscribe();\n    this.revokeChoiceSubscription.unsubscribe();\n    this.noCookieLawSubscription.unsubscribe();\n  }\n}\n\n```\n\nSee [Cookie Consent Documentation](https://cookieconsent.insites.com/documentation/about-cookie-consent/) to see more about how to customize the UI or interact with user interactions.\n\n## I18n Support\n\nMessages displayed in the Cookie Consent Bar can easily be translated, using libraries like [ngx-translate](https://github.com/ngx-translate/core).\nBasically this involved the following steps (using ngx-translate + Anglar CLI):\n\n* [Install](https://github.com/ngx-translate/core#installation) and [configure](https://github.com/ngx-translate/core#usage) `ngx-translate`\n\n* Provide the translation JSON files in `src/assets/`, for e.g: `en.json`, `fr.json`, ...\n\n```JSON\n{\n    \"cookie\": {\n        \"header\": \"Cookies used on the website!\",\n        \"message\": \"This website uses cookies to ensure you get the best experience on our website.\",\n        \"dismiss\": \"Got it!\",\n        \"allow\": \"Allow cookies\",\n        \"deny\": \"Decline\",\n        \"link\": \"Learn more\",\n        \"policy\": \"Cookie Policy\"\n    }\n}\n```\n\n\u003e **Note:** see [content-options.ts](https://github.com/tinesoft/ngx-cookieconsent/blob/master/src/model/content-options.ts) for complete list of messages that can be translated.\n\n* Configure your main component `AppComponent`\n\n```ts\nimport { Component, OnInit } from '@angular/core';\nimport { TranslateService } from '@ngx-translate/core';\n\n@Component({\n  selector: 'app-root',\n  templateUrl: './app.component.html',\n  styleUrls: ['./app.component.scss']\n})\nexport class AppComponent {\n\n  constructor(private ccService: NgcCookieConsentService, private translateService:TranslateService) {\n  }\n\n  ngOnInit() {\n    // Support for translated cookies messages\n    this.translateService.addLangs(['en', 'fr']);\n    this.translateService.setDefaultLang('en');\n\n    const browserLang = this.translateService.getBrowserLang();\n    this.translateService.use(browserLang.match(/en|fr/) ? browserLang : 'en');\n\n    this.translateService//\n      .get(['cookie.header', 'cookie.message', 'cookie.dismiss', 'cookie.allow', 'cookie.deny', 'cookie.link', 'cookie.policy'])\n      .subscribe(data =\u003e {\n\n        this.ccService.getConfig().content = this.ccService.getConfig().content || {} ;\n        // Override default messages with the translated ones\n        this.ccService.getConfig().content.header = data['cookie.header'];\n        this.ccService.getConfig().content.message = data['cookie.message'];\n        this.ccService.getConfig().content.dismiss = data['cookie.dismiss'];\n        this.ccService.getConfig().content.allow = data['cookie.allow'];\n        this.ccService.getConfig().content.deny = data['cookie.deny'];\n        this.ccService.getConfig().content.link = data['cookie.link'];\n        this.ccService.getConfig().content.policy = data['cookie.policy'];\n\n        this.ccService.destroy(); // remove previous cookie bar (with default messages)\n        this.ccService.init(this.ccService.getConfig()); // update config with translated messages\n      });\n  }\n}\n```\n\n## Custom Layout Support\n\nCookie Consent supports [custom layouts](https://cookieconsent.insites.com/documentation/javascript-api/#layout_options), and so does `ngx-cookieconsent`.\nSo if your are not happy with the default appearance of the cookie bar, you can totally customize it to better suit your needs. This involves overriding a few options:\n\n* [NgcCookieConsentConfig.layout](https://github.com/tinesoft/ngx-cookieconsent/blob/master/src/service/cookieconsent-config.ts#L78): to define the name of your custom layout to use. For e.g `my-custom-layout`\n* [NgcCookieConsentConfig.layouts](https://github.com/tinesoft/ngx-cookieconsent/blob/master/src/service/cookieconsent-config.ts#L73): to define your custom layout HTML. Elements between `{{` and `}}` will be replaced by their content (see in `[NgcCookieConsentConfig.content` below)\n* [NgcCookieConsentConfig.elements](https://github.com/tinesoft/ngx-cookieconsent/blob/master/src/model/cookieconsent-config.ts#L44) : html elements referenced in the custom layout (between `{{` and `}}`)\n* [NgcCookieConsentConfig.content](https://github.com/tinesoft/ngx-cookieconsent/blob/master/src/model/cookieconsent-config.ts#L36) : content of elements referenced in the custom elements above (between `{{` and `}}`)\n\nHere is a example of a **custom layout**, that is inspired from the default 'basic' layout , but simply changes the message and links that are displayed in the bar.\n\n\u003cp align=\"center\"\u003e\n  \u003cimg style=\"text-align: center;\" src=\"https://cdn.rawgit.com/tinesoft/ngx-cookieconsent/master/demo/src/assets/custom-cookie-bar.png\"\u003e\n\u003c/p\u003e\n\n```ts\nimport {NgcCookieConsentModule, NgcCookieConsentConfig} from 'ngx-cookieconsent';\n\nconst cookieConfig:NgcCookieConsentConfig = {\n  cookie: {\n    domain: 'localhost'// it is recommended to set your domain, for cookies to work properly\n  },\n  palette: {\n    popup: {\n      background: '#000'\n    },\n    button: {\n      background: '#f1d600'\n    }\n  },\n  theme: 'edgeless',\n  type: 'opt-out',\n  layout: 'my-custom-layout',\n  layouts: {\n    \"my-custom-layout\": '{{messagelink}}{{compliance}}'\n  },\n  elements:{\n    messagelink: `\n    \u003cspan id=\"cookieconsent:desc\" class=\"cc-message\"\u003e{{message}} \n      \u003ca aria-label=\"learn more about cookies\" tabindex=\"0\" class=\"cc-link\" href=\"{{cookiePolicyHref}}\" target=\"_blank\" rel=\"noopener\"\u003e{{cookiePolicyLink}}\u003c/a\u003e, \n      \u003ca aria-label=\"learn more about our privacy policy\" tabindex=\"1\" class=\"cc-link\" href=\"{{privacyPolicyHref}}\" target=\"_blank\" rel=\"noopener\"\u003e{{privacyPolicyLink}}\u003c/a\u003e and our \n      \u003ca aria-label=\"learn more about our terms of service\" tabindex=\"2\" class=\"cc-link\" href=\"{{tosHref}}\" target=\"_blank\" rel=\"noopener\"\u003e{{tosLink}}\u003c/a\u003e\n    \u003c/span\u003e\n    `,\n  },\n  content:{\n    message: 'By using our site, you acknowledge that you have read and understand our ',\n    \n    cookiePolicyLink: 'Cookie Policy',\n    cookiePolicyHref: 'https://cookie.com',\n\n    privacyPolicyLink: 'Privacy Policy',\n    privacyPolicyHref: 'https://privacy.com',\n\n    tosLink: 'Terms of Service',\n    tosHref: 'https://tos.com',\n  }\n};\n\n\n@NgModule({\n  declarations: [AppComponent, ...],\n  imports: [NgcCookieConsentModule.forRoot(cookieConfig), ...],  \n  bootstrap: [AppComponent]\n})\nexport class AppModule {\n}\n```\n\n## Compatibility with Angular\n\nEvery Nx plugin relies on the underlying Nx Workspace/DevKit it runs on. This table provides the compatibility matrix between major versions of Nx workspace and this plugin.\n\n| Library Version | Angular version\n| -------------- | --------------------\n| `\u003e=v8.0.0`     | `\u003e=v19.x.x`\n| `\u003e=v7.0.0`     | `\u003e=v18.x.x`\n| `\u003e=v6.0.0`     | `\u003e=v16.x.x`\n| `\u003e=v5.0.0`     | `\u003e=v15.x.x`\n| `\u003e=v4.0.1`     | `\u003e=v14.x.x`\n| `v3.0.1`       | `\u003e=v12.x.x`\n| `\u003e=v2.2.3`     | `\u003e=v6.x.x`\n| `v1.1.0`       | `\u003cv6.x.x`\n\n## Credits\n\n`ngx-cookieconsent` is built upon [Cookie Consent](https://www.osano.com/cookieconsent/), by [Osano](https://osano.com)\n\n## License\n\nCopyright (c) 2018-present Tine Kondo. Licensed under the MIT License (MIT)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftinesoft%2Fngx-cookieconsent","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftinesoft%2Fngx-cookieconsent","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftinesoft%2Fngx-cookieconsent/lists"}