A simple Angular wrapper for the Cookiebot SDK
An Angular wrapper around the Cookiebot SDK.
npm i ngx-cookiebot-angular7 -S
Setup
$3
A Cookiebot account.$3
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)
]
})
`$3
Configure the service according to the Cookiebot developer docs.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
$3
The script will now automatically append itself to the 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 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)
)
...
`$3
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