I have an angular component where I would like to perform actions when a specific cookie is changed. I read that I can do it via CookieStore Api () But when I try to use it in my angular component, the code does not compile:

    ngOnInit() {
   
        if ('cookieStore' in window) {
            // Listen for changes to cookies
            window.cookieStore.addEventListener('change', event => {
                event.changed.forEach(change => {
                    console.log(`Cookie changed: ${change.name} = ${change.value}`);
                }); 
            });
        } else {
            console.log('Cookie Store API is not supported in this browser.');
        }
    }

Error is

TS2339: Property cookieStore does not exist on type Window & typeof globalThis

I am using angular version: 15.2.10. Is there any way I can use the CookieStore Api in my angular code? Either service or component?

I have an angular component where I would like to perform actions when a specific cookie is changed. I read that I can do it via CookieStore Api (https://developer.mozilla./en-US/docs/Web/API/CookieStore/change_event) But when I try to use it in my angular component, the code does not compile:

    ngOnInit() {
   
        if ('cookieStore' in window) {
            // Listen for changes to cookies
            window.cookieStore.addEventListener('change', event => {
                event.changed.forEach(change => {
                    console.log(`Cookie changed: ${change.name} = ${change.value}`);
                }); 
            });
        } else {
            console.log('Cookie Store API is not supported in this browser.');
        }
    }

Error is

TS2339: Property cookieStore does not exist on type Window & typeof globalThis

I am using angular version: 15.2.10. Is there any way I can use the CookieStore Api in my angular code? Either service or component?

• javascript
• angular
• typescript
• addeventlistener
• cookiestore

2 Answers 2

It's not enough to define Window.cookieStore, you also need to define the CookieStore type and the event listener overload

type CookieChangeType = {
  name: string,
  value: string,
  expires: Date,
  domain: string,
}

interface CookieChangeEvent extends Event {
  changed: CookieChangeType[]
}

type CookieStore = {
  addEventListener: Window["addEventListener"]
}

declare global { 
  interface Window { 
    cookieStore: CookieStore; 
    addEventListener(type: String, listener: (this: Window, ev: CookieChangeEvent) => any, useCapture?: boolean): void;
  } 
}

Now your ngOnInit will use the new types, and not throw any type errors

ngOnInit() {
  window.cookieStore.addEventListener('change', (event: CookieChangeEvent) => {
    event.changed.forEach((change: CookieChangeType) => {
        console.log(`Cookie changed: ${change.name} = ${change.value}`);
    })
  })
}

You can resolve this by extending the Window interface to include cookieStore. Create a declaration file (e.g., window.d.ts) and add

declare global { 
  interface Window { 
    cookieStore: CookieStore; 
  } 
}

This will let TypeScript recognize the API and compile correctly.

Stackblitz Demo