https://github.com/KoblerS/ngx-gdpr-cookie-consent
A beautiful Cookie 🍪 consent library, easy to use.
https://github.com/KoblerS/ngx-gdpr-cookie-consent
angular cookieconsent dependency gdpr
Last synced: 12 days ago
JSON representation
A beautiful Cookie 🍪 consent library, easy to use.
- Host: GitHub
- URL: https://github.com/KoblerS/ngx-gdpr-cookie-consent
- Owner: KoblerS
- License: mit
- Created: 2022-12-03T16:37:21.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2025-05-02T11:37:37.000Z (15 days ago)
- Last Synced: 2025-05-02T11:51:38.619Z (15 days ago)
- Topics: angular, cookieconsent, dependency, gdpr
- Language: TypeScript
- Homepage: https://koblers.github.io/ngx-gdpr-cookie-consent/
- Size: 813 KB
- Stars: 5
- Watchers: 0
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-angular - ngx-gdpr-cookie-consent - A beautiful Cookie consent library, easy to use. (Table of contents / Third Party Components)
- trackawesomelist - ngx-gdpr-cookie-consent (⭐6) - A beautiful Cookie consent library, easy to use. (Recently Updated / [May 05, 2025](/content/2025/05/05/README.md))
README
# ngx-gdpr-cookie-consent
[](https://badge.fury.io/js/ngx-gdpr-cookie-consent)
## Demo
View the module in action at https://KoblerS.github.io/ngx-gdpr-cookie-consent
## Installation
Install `Ngx Cookie Consent` dependency:
```shell
npm install --save ngx-gdpr-cookie-consent
```
## Usage
1. Import the `NgxGdprCookieConsentModule` and define all cookie types:
Finally, you can use ngx-gdpr-cookie-consent in your Angular project. You have to import `NgxGdprCookieConsentModule.forRoot()` in the root NgModule of your application.
The forRoot static method is a convention that provides and configures services at the same time. Make sure you only call this method in the root module of your application, most of the time called AppModule. This method allows you to configure the NgxGdprCookieConsentModule by specifying different cookie types.
Here is an example how to configure 2 different cookie definitions:
```typescript
import {NgModule} from '@angular/core';
import {NgxGdprCookieConsentModule} from '@ngx-gdpr-cookie-consent';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@NgModule({
imports: [
BrowserAnimationsModule,
NgxGdprCookieConsentModule.forRoot({
cookieTypes: [
{
id: 'essential',
name: 'Essential cookies',
description: 'Essential cookies are required in order to guarantee app stability',
disabled: true,
selected: true
},
{
id: 'external',
name: 'External Services',
description: 'External services help us to delivery customer experience',
scripts: [
'https://maps.googleapis.com/maps/api/js?libraries=places&key=mymapskey'
]
}
]
})
],
bootstrap: [AppComponent]
})
export class AppModule { }
```
2. Add the cookie consent component to your `app.component.ts`:
```html
```
```typescript
import { Component, ViewChild } from '@angular/core';
import { NgxGdprCookieConsentConfig } from 'projects/ngx-gdpr-cookie-consent/src/lib/model/common-types';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
config: NgxGdprCookieConsentConfig = {
image: 'assets/images/cookie.png',
legalLinks: [
{
name: 'TOS',
url: '#'
}
]
};
}
```
## Show content based on decision
This will show the inner container only if cookieId `external` has been consented
```html
```
## Contributing
This project has a maintainer that actively monitors its issue queue and responds in a timely manner. This means that bug reports, tasks, feature requests and support request posted in the project's issue should receive timely attention from project's maintainers. Other community members are also welcome to resolve issues posted to the issue queue.
## License
ngx-gdpr-cookie-consent is licensed under the MIT license.