# ngx-cookiebot-angular7

> A simple Angular wrapper for the Cookiebot SDK

Latest version **1.0.7** (published 2021-02-05) · MIT license · 0 weekly downloads

## Install

```sh
npm install ngx-cookiebot-angular7
pnpm add ngx-cookiebot-angular7
yarn add ngx-cookiebot-angular7
bun add ngx-cookiebot-angular7
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.7 |
| Published | 2021-02-05 |
| First published | 2021-02-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 180.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Andreas Larssen |
| Maintainers | ruyman |
| Keywords | angular, cookie, cookiebot, cookies, ngx |

## Links

- npm: https://www.npmjs.com/package/ngx-cookiebot-angular7
- Repository: https://github.com/alu0100845235/ngx-library/tree/main/projects/ngx-cookiebot
- Homepage: https://github.com/alu0100845235/ngx-library/blob/main/projects/ngx-cookiebot/README.md
- Issues: https://github.com/alu0100845235/ngx-library/issues
- npm.io page: https://npm.io/package/ngx-cookiebot-angular7

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) ^1.9.0

## Recent versions

- 1.0.7 (latest) — 2021-02-05

## README

# NgxCookiebot

An Angular wrapper around the [Cookiebot](https://www.cookiebot.com/) SDK.

## Installation
```
npm i ngx-cookiebot-angular7 -S
```

## Setup

### Prerequisites
A Cookiebot account.

### 1. Export / import script

```typescript
// shared.module.ts
import { NgxCookiebotModule } from 'ngx-cookiebot-angular7';

@NgModule({
  exports: [
    NgxCookiebotModule
  ]
})
```

```typescript
// app.module.ts
import { NgxCookiebotModule } from 'ngx-cookiebot-angular7';
import { CookiebotConfig } from '@config/cookiebot.config';

@NgModule({
  imports: [
    NgxCookiebotModule.forRoot(CookiebotConfig)
  ]
})
```

### 2. Configure service
Configure the service according to the [Cookiebot developer docs](https://www.cookiebot.com/en/developer/).

```typescript
// cookiebot.config.ts
import { NgxCookiebotConfig } from 'ngx-cookiebot-angular7';

export class CookiebotConfig extends NgxCookiebotConfig {
  blockingMode: 'auto' | 'manual' | string;
  cbId: string;
  culture?: string;
  framework?: string;
  level?: string;
  type?: string;
}
```

## Usage

### Consent box
The script will now automatically append itself to the `head` tag, which in turn will prompt the cookie consent box.

To interact with the "cookiebot" object, NgxCookiebot comes with a service that exposes it, which is ready for use after the service is ready (the script is injected):

```typescript
// whatever.ts
...
constructor(private _cookieBotService: NgxCookiebotService) {}
...
this._cookieBotService.onServiceReady$.pipe(
  filter((ready: boolean) => {
    return ready;
  })
).subscribe(() => {
  // this._cookieBotService.cookiebot is available
});
...
```

Reference the [Cookiebot docs](https://www.cookiebot.com/en/developer/) for a list of properties, methods and callbacks available through the cookiebot object. 

If you prefer to use observables, the NgxCookiebotService exposes an observable for every available method and callback on the cookiebot object:

#### Methods

| Method                            | Observable            |
|-----------------------------------|:-------------------------:|
| CookiebotOnConsentReady           | onConsentReady$           |
| CookiebotOnLoad                   | onLoad$                   |
| CookiebotOnAccept                 | onAccept$                 |
| CookiebotOnAccept                 | onAccept$                 |
| CookiebotOnDecline                | onDecline$                |
| CookiebotOnDialogInit             | onDialogInit$             |
| CookiebotOnDialogDisplay          | onDialogDisplay$          |  
| CookiebotOnTagsExecuted           | onTagsExecuted$           |

#### Callbacks

| Callback                          | Observable                |
|-----------------------------------|:-------------------------:|
| CookiebotCallback_OnLoad          | onLoadCallback$           |
| CookiebotCallback_OnAccept        | onAcceptCallback$         |
| CookiebotCallback_OnDecline       | onDeclineCallback$        |
| CookiebotCallback_OnDialogInit    | onDialogInitCallback$     |
| CookiebotCallback_OnDialogDisplay | onDialogDisplayCallback$  |
| CookiebotCallback_OnTagsExecuted  | onTagsExecutedCallback$   |

Usage example:
```typescript
// whatever.ts
...
this._cookieBotService.onConsentReady$.subscribe(
  // Consent ready
  console.log(this._cookieBotService.cookiebot.consent)
)
...
```

### Cookie declaration
The NgxCookiebot package exposes a component to insert the cookie consent declaration. 
Use the component where you want the declaration to appear: 

```
// my.component.html

<ngx-cookiebot-declaration></ngx-cookiebot-declaration>
```

## License
MIT © [Hallo Verden](https://github.com/halloverden)

## Change log

### 1.0.7
- Transpile to es5
- Added change log

### 1.0.6
- Changes in documentation

### 1.0.5
- Changes in documentation

### 1.0.4
- Changes in documentation

### 1.0.3
- Initial version

---
_Source: https://npm.io/package/ngx-cookiebot-angular7 · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._