npm version Build Cookiemonster Package

A customizable Cookie Consent Banner 🍪 for Angular. Built with Tailwind CSS. GDPR & EU ready!

Consent is saved to the Browsers LocalStorage.

Getting started

  1. Install motion package
npm i @notiz/cookie-monster
  1. Import CookieConsentModule into your component module
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

import { CookieConsentModule } from '@notiz/cookie-monster';
import { cookieConfig } from './cookie.config';

  declarations: [AppComponent],
  imports: [BrowserModule, CookieConsentModule.forRoot(cookieConfig)],
  providers: [],
  bootstrap: [AppComponent],
export class AppModule {}

and create your own CookieConsentOptions and fill in your text, links and cookie options.

// cookie.config.ts
import { CookieConsentOptions } from '@notiz/cookie-monster';

export const cookieConfig: CookieConsentOptions = {
  title: 'We use cookies 🍪',
  message: `We use cookies to improve your experience and for marketing.`,
  links: [
    { label: 'Cookie policy', url: 'http://localhost.4200/cookie-policy' },
    { label: 'Privacy Policy', url: 'http://localhost.4200/privacy-policy' },
  acceptAllLabel: 'Accept all',
  acceptSelectionLabel: 'Accept selection',
  showMoreLabel: 'More options',
  showLessLabel: 'Show less',
  cookies: {
    necessary: {
      title: 'Necessary Cookies',
      label: 'These cookies are needed for the site to function correctly.',
      value: true,
      disabled: true,
    functional: {
      title: 'Functional cookies',
        'Functional cookies make it possible to save information that changes the way the website appears or acts.',
    statistics: {
      title: 'Statistics',
        'Statistical cookies help the website owner understand how visitors interact with the website by collecting and reporting information.',
    marketing: {
      title: 'Marketing',
        "Marketing / targeting cookies are usually used to show you ads that match your interests. When you visit another website, your browser's cookie is recognized and selected ads are displayed to you based on the information stored in this cookie (Art. 6 para. 1 p. 1 a) DSGVO).",
  1. Cookie Consent checks the browser LocalStorage, if the consent is not saved it will open up automatically.

  2. Use CookieConsentService to show and delete the consent, access the cookie selection or pick out one cookie:

import { Component } from '@angular/core';
import { CookieConsentService } from '@notiz/cookie-monster';

  selector: 'app-root',
  templateUrl: '...',
export class AppComponent {
  constructor(public cookies: CookieConsentService) {}

  showCookieConsent() {

  deleteCookieConsent() {

  cookieSelection$(): Observable<CookieSelection> {
    return this.cookies.cookieSelection$();

  cookieSelectionSnapshot(): CookieSelection {
    return this.cookies.cookieSelectionSnapshot();

  acceptedCookie$(): Observable<boolean> {
    return this.cookies.accepted$('necessary');

  acceptedCookieSnapshot(): boolean {
    return this.cookies.acceptedSnapshot('statistics');

The cookie consent is saved to the browser LocalStorage as JSON Object. Access the cookie consent in the LocalStorage by reading it with the default key COOKIE_CONSENT.

import { COOKIE_CONSENT_STORAGE_KEY } from '@notiz/cookie-monster';

readCookieConsent() {
  const cookieConsentJSON = localStorage.getItem(COOKIE_CONSENT_STORAGE_KEY);
  const cookieConsent = JSON.parse(cookieConsentJSON);

  // access cookieConsent

CookieConsentOptions allows you to change the LocalStorage key for the cookie consent by using cookieConsentLocalStorageKey:

// cookie.config.ts
import { CookieConsentOptions } from '@notiz/cookie-monster';

export const cookieConfig: CookieConsentOptions = {
  title: 'We use cookies 🍪',
  cookieConsentLocalStorageKey: 'cookiemonster'


Change the theme with the CSS variables below.

cc-banner {
  --cc-background: theme(colors.gray.100);
  --cc-background-shade: theme(colors.gray.300);
  --cc-title-color: theme(colors.gray.900);
  --cc-color: theme(colors.gray.700);
  --cc-link-color: theme(colors.gray.600);
  --cc-primary: theme(colors.indigo.500);
  --cc-primary-hover: theme(colors.indigo.600);
  --cc-primary-color: theme(colors.gray.50);
  --cc-secondary: var(--colors.gray.300);
  --cc-secondary-hover: theme(colors.gray.200);
  --cc-secondary-color: theme(colors.gray.800);

If you are using Tailwind in your project include the Cookie Banner in the content list:

module.exports = {
  content: [
    './src/**/*.{html,ts}', // your purge config
    './node_modules/@notiz/cookie-monster/esm2020/**/*.mjs', // 👈 cookie banner component
  theme: {},


Start the demo oject

ng s demo
  • en
  • de
Portfolio Blog

Write us!

We usually answer to messages within one business day.


Subscribe to newsletter

Sign up for newsletter to stay up to date. Sent every other week.