@jensuweb/ngx-cookie-banner NPM

CookieBanner

This Library is a simple configurable cookie banner component.

Usage

Run npm i @jensuweb/ngx-cookie-banner
Add CookieBannerModule to your AppModule

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";
import { CookieBannerModule } from "@jensuweb/ngx-cookie-banner";

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, AppRoutingModule, CookieBannerModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

Import library styles in your public scss file and set color variables. Instead of importing, you can copy the scss code and modify it to your needs. Don't forget to place it inside your public styles, otherwise it will not work. Please keep in mind that we use css variables since version v14.0.0

// Set colors as you like. The following are the default colors.
  --color-cookie-background: #f5f5f5;
  --color-cookie-checkbox-border: #8c8c8c;
  --color-cookie-checkmark: #fff;
  --color-cookie-primary: #16168a;
  --color-cookie-secondary: #00d5ff;
  --color-cookie-text: #000;
  --color-cookie-btn-text: #fff;
  --color-cookie-shadow: #000;
@import "@jensuweb/ngx-cookie-banner/src/lib/cookie-banner.component.scss";

Setup options object in app.component

import { isPlatformBrowser } from "@angular/common";
import { Component, Inject, PLATFORM_ID } from "@angular/core";
import { TranslateService } from "@ngx-translate/core";
import { environment } from "src/environments/environment";
import {
  CookieOption,
  Options,
  CookieService,
} from "@jensuweb/ngx-cookie-banner/src/public-api";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"],
})
export class AppComponent {
  public cookieOptions: Options = {
    title: "Banner Title",
    description:
      "I respect your privacy and will only load the cookies, you want",
    buttonAll: "Acceppt all",
    buttonSelected: "Accept only selected",
    labelNecessary: "Necessary",
    options: [new CookieOption({ value: "analytics", label: "Analytics" })],
  };

  constructor(cookieService: CookieService) {
    cookieService.gaTrackingId = "ga-12345";
  }
}

Add cookie banner to your app.component.html. If you use angular universal, don't forget to show banner only on platform browser, or it will throw errors.

<router-outlet></router-outlet>
<ngx-cookie-banner [options]="cookieOptions">
  <p>This is some custom html displayed above the checkboxes.</p>
</ngx-cookie-banner>

The CookieConsent object, which includes the user cookie selection, will be stored in "cookieConsent" localStorage variable.

Subscribe to Cookie Consent

The last thing to do is to subscripe to getCookieConsent and load your content, depending on what the user wants to allow

export class AppComponent {
  // ...
  constructor(private cookieService: CookieService) {
    this.cookieService.getCookieConsent().subscribe({
      next: (result: CookieConsent) => {
        if (result && result.options) {
          for (let option of result.options) {
            if (option.value === "analytics" && option.checked) {
              // If you added an option with label "analytics, this is handled automatically
              this.cookieService.loadGoogleAnalytics("myTrackingId");
            }
            // ...more cookie consent options...
          }
        }
      },
    });
  }
  // ...
}

Alternative to the previous way, you can do it a bit simpler like this:

export class AppComponent {
  // ...
  constructor(private cookieService: CookieService) {
    this.cookieService.getOption("tracking").subscribe({
      next: (result: CookieOption) => {
        this.cookieService.loadGoogleAnalytics("myTrackingId");
      },
    });
  }
  // ...
}