npm i vanilla-cookieconsent@3.0.1

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orestbida/cookieconsent@3.0.1/dist/cookieconsent.css">

<script src="https://cdn.jsdelivr.net/gh/orestbida/cookieconsent@3.0.1/dist/cookieconsent.umd.js"></script>

{
    ...
        "build": {
            "options": {
                "styles": [
                    "node_modules/vanilla-cookieconsent/dist/cookieconsent.css"
                ]
            }
        }
    ...
}

import * as CookieConsent from 'vanilla-cookieconsent';

import { Component, AfterViewInit } from '@angular/core';
import * as CookieConsent from 'vanilla-cookieconsent';

@Component({
  selector: 'app-cookietest',
  standalone: true,
  templateUrl: './cookietest.component.html',
  styleUrls: ['./cookietest.component.css'],
  imports: []
})
export class CookietestComponent implements AfterViewInit {
  title = 'angular-javascript-demo';

  ngAfterViewInit(): void {
    CookieConsent.run({
      cookie: {
        name: 'cc_cookie',
      },
      guiOptions: {
        consentModal: {
          layout: 'cloud inline',
          position: 'bottom center',
          equalWeightButtons: true,
          flipButtons: false
        },
        preferencesModal: {
          layout: 'box',
          equalWeightButtons: true,
          flipButtons: false
        }
      },
      onFirstConsent: ({cookie}) => {
        console.log('onFirstConsent fired', cookie);
      },
      onConsent: ({cookie}) => {
        console.log('onConsent fired!', cookie);
      },
      onChange: ({changedCategories, changedServices}) => {
        console.log('onChange fired!', changedCategories, changedServices);
      },
      onModalReady: ({modalName}) => {
        console.log('ready:', modalName);
      },
      onModalShow: ({modalName}) => {
        console.log('visible:', modalName);
      },
      onModalHide: ({modalName}) => {
        console.log('hidden:', modalName);
      },
      categories: {
        necessary: {
          enabled: true,
          readOnly: true
        },
        analytics: {
          autoClear: {
            cookies: [
              {
                name: /^_ga/,
              },
              {
                name: '_gid',
              }
            ]
          },
          services: {
            ga: {
              label: 'Google Analytics',
              onAccept: () => {},
              onReject: () => {}
            },
            youtube: {
              label: 'Youtube Embed',
              onAccept: () => {},
              onReject: () => {}
            }
          }
        },
        ads: {}
      },
      language: {
        default: 'de',
        translations: {
          de: {
            consentModal: {
              title: 'Wir benutzen Cookies',
              description: 'Wir verwenden Cookies, um Ihnen einen optimalen Service anzubieten und diesen immer weiter zu verbessern. Weitere Informationen finden Sie in unserer <a href="#">Datenschutzerklärung</a>.',
              acceptAllBtn: 'Alle Akzeptieren',
              acceptNecessaryBtn: 'Nur notwendige Cookies',
              showPreferencesBtn: 'Weitere Optionen',
            },
            preferencesModal: {
              title: 'Cookie-Einstellungen verwalten',
              acceptAllBtn: 'Alle Akzeptieren',
              acceptNecessaryBtn: 'Nur Notwendige Cookies',
              savePreferencesBtn: 'Auswahl Bestätigen',
              closeIconLabel: 'Schließen',
              serviceCounterLabel: 'Dienst|Dienste',
              sections: [
                {
                  title: 'Cookies',
                  description: 'Um den Besuch unserer Website attraktiv zu gestalten und die Nutzung bestimmter Funktionen zu ermöglichen, verwenden wir Cookies, also kleine Textdateien, die auf Ihrem Endgerät abgelegt werden. Teilweise werden diese Cookies nach Schließen des Browsers automatisch wieder gelöscht (sog. „Session-Cookies“), teilweise verbleiben diese Cookies länger auf Ihrem Endgerät und ermöglichen das Speichern von Seiteneinstellungen (sog. „persistente Cookies“). Sofern durch einzelne von uns eingesetzte Cookies auch personenbezogene Daten verarbeitet werden, erfolgt die Verarbeitung gemäß Art. 6 Abs. 1 lit. b DSGVO entweder zur Durchführung des Vertrages, gemäß Art. 6 Abs. 1 lit. a DSGVO im Falle einer erteilten Einwilligung oder gemäß Art. 6 Abs. 1 lit. f DSGVO zur Wahrung unserer berechtigten Interessen an der bestmöglichen Funktionalität der Website sowie einer kundenfreundlichen und effektiven Ausgestaltung des Seitenbesuchs.',
                  linkedCategory: 'necessary'
                },
                {
                  title: 'Hosting & Content-Delivery-Network',
                  description: 'Wir nutzen ein Content Delivery Network des folgenden Anbieters: Google Ireland Limited, Gordon House, 4 Barrow St, Dublin, D04 E5W5, Irland. Dieser Dienst ermöglicht uns, große Mediendateien wie Grafiken, Seiteninhalte oder Skripte über ein Netz regional verteilter Server schneller auszuliefern. Die Verarbeitung erfolgt zur Wahrung unseres berechtigten Interesses an der Verbesserung der Stabilität und Funktionalität unserer Website gem. Art. 6 Abs. 1 lit. f DSGVO.',
                  linkedCategory: 'necessary'
                },
                {
                  title: 'Webanalysedienste',
                  description: 'Diese Website benutzt Google Analytics 4, einen Webanalysedienst der Google Ireland Limited, Gordon House, 4 Barrow St, Dublin, D04 E5W5, Irland ("Google"), der eine Analyse Ihrer Benutzung unserer Website ermöglicht. Standardmäßig werden beim Besuch der Website durch Google Analytics 4 Cookies gesetzt, die als kleine Textbausteine auf Ihrem Endgerät abgelegt werden und bestimmte Informationen erheben. Die Informationen werden an Server von Google übertragen und dort weiterverarbeitet. Dabei sind auch Übermittlungen an Google LLC mit Sitz in den USA möglich. Google nutzt die erhobenen Informationen in unserem Auftrag, um Ihre Nutzung der Website auszuwerten, Reports über die Websiteaktivitäten für uns zusammenzustellen und um weitere mit der Websitenutzung und der Internetnutzung verbundene Dienstleistungen zu erbringen.',
                  linkedCategory: 'analytics',
                  cookieTable: {
                    caption: 'Cookie-Tabelle',
                    headers: {
                      name: 'Cookie',
                      domain: 'Domain',
                      desc: 'Beschreibung'
                    },
                    body: [
                      {
                        name: '_ga',
                        domain: 'example.com',  
                        desc: 'Google Analytics Cookie zur Unterscheidung der Benutzer.',
                      },
                      {
                        name: '_gid',
                        domain: 'example.com',  
                        desc: 'Google Analytics Cookie zur Unterscheidung der Benutzer.',
                      }
                    ]
                  }
                },
                {
                  title: 'Datenerfassung beim Besuch unserer Website',
                  description: 'Bei der bloß informatorischen Nutzung unserer Website, also wenn Sie sich nicht registrieren oder uns anderweitig Informationen übermitteln, erheben wir nur solche Daten, die Ihr Browser an den Seitenserver übermittelt (sog. „Server-Logfiles“). Wenn Sie unsere Website aufrufen, erheben wir die folgenden Daten, die für uns technisch erforderlich sind, um Ihnen die Website anzuzeigen: Unsere besuchte Website, Datum und Uhrzeit zum Zeitpunkt des Zugriffes, Menge der gesendeten Daten in Byte, Quelle/Verweis, von welchem Sie auf die Seite gelangten, Verwendeter Browser, Verwendetes Betriebssystem, Verwendete IP-Adresse (ggf.: in anonymisierter Form).',
                  linkedCategory: 'dataCollection'
                },
                {
                  title: 'Mehr Informationen',
                  description: 'Bei Fragen in Bezug auf Cookies und Ihre Wahlmöglichkeiten, wenden Sie sich bitte an <a href="#contact-page">Kontakt</a>'
                }
              ]
            }
          }
        }
      }
    });
  }
}

<button type="button" data-cc="show-preferencesModal" class="cookie-preferences-btn">Manage cookie preferences</button>