🍪✨Angular Cookie Consent Banner in 5 Minutes

If you’re building an Angular app, adding a cookie consent banner is an essential step toward GDPR compliance. Fortunately, with the help of the ngx-cookie-service package, you can set up a simple, functional banner in just 5 minutes.

In this quick tutorial, we’ll walk through creating a cookie consent banner using Angular and ngx-cookie-service.

🔧Set up the Environment

As in previous tutorials, let’s first install Node and npm

• Node: https://nodejs.org/
• npm: https://www.npmjs.com/

Set up the Angular project by installing the Angular CLI tool:

npm install -g @angular/cli

Create a project called my-cookie-banner:

ng new my-cookie-banner

Enter the project directory:

cd my-cookie-banner

Install the cookie service:

npm install ngx-cookie-service

🧱 Create the Consent Banner Component

Generate a new component:

ng generate component cookie-banner

Now, update the cookie-banner.component.ts:

import { Component, OnInit } from '@angular/core';
import { CookieService } from 'ngx-cookie-service';

@Component({
  selector: 'app-cookie-banner',
  providers: [CookieService],
  templateUrl: './cookie-banner.html',
  styleUrl: './cookie-banner.css',
})
export class CookieBanner implements OnInit {
  showBanner = false;
  cookieName = 'cookie_consent';

  constructor(private cookieService: CookieService) {}

  ngOnInit(): void {
    this.showBanner = !this.cookieService.check(this.cookieName);
  }

  acceptCookies(): void {
    this.cookieService.set(this.cookieName, 'accepted', 365);
    this.showBanner = false;
  }
}

Then, update cookie-banner.component.html:

@if (showBanner) {
<div class="cookie-banner">
  <p>
    This site uses cookies to improve your 
    experience. By using this site, you
    accept cookies.
  </p>
  <button (click)="acceptCookies()">Accept</button>
</div>
}

And add some quick styles in cookie-banner.component.css:

.cookie-banner {
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: #323232;
  color: white;
  padding: 1rem;
  text-align: center;
  z-index: 1000;
}

.cookie-banner button {
  margin-left: 1rem;
  padding: 0.5rem 1rem;
  background-color: #4caf50;
  border: none;
  color: white;
  cursor: pointer;
  border-radius: 4px;
}

🧩 Include the Banner in Your App

Add the banner selector to app.component.html:

<app-cookie-banner></app-cookie-banner>
<!-- Your app content -->

Now check the browser to see the cookie banner:

✅ Done!

That’s it! You now have a fully working cookie consent banner that:

• Only appears if the user hasn’t accepted cookies.
• Stores the consent in a cookie for 365 days.
• Hides itself once accepted.

📝 Bonus: Customize It

You can easily enhance the banner to support multiple languages, reject buttons, cookie policy links, or animations using Angular animations or libraries like ngx-translate.

📦 Package Info

ngx-cookie-service on npm: https://www.npmjs.com/package/ngx-cookie-service

Conslusion

Now you know how to build a cookie banner with the ngx-cookie-service in your Angular project. Happy Coding!