Skip to main content

Consent Preferences Link Not Working in Angular – Termly Cookie Banner Fix

Raouia Belhiba
Updated

When using Termly’s Cookie Consent Banner with the Resource Blocker script in an Angular (Single Page Application), you may notice that the standard “Consent Preferences” link does not work when placed inside dynamically rendered components such as a footer.

This article explains:

  • Why this happens
  • The supported implementation
  • A recommended solution for Angular SPAs

Why the Footer Link May Not Work in Angular

The standard Termly preference link is:

<a href="#" class="termly-display-preferences">Consent Preferences</a>

This works by allowing Termly’s script to attach a click handler when the page initially loads.

However, in Angular SPAs:

  • The footer is often rendered dynamically after the initial page load.
  • When Termly initializes, the link does not yet exist in the DOM.
  • Because of this, Termly cannot attach its click handler.
  • Result: Clicking the link does nothing.

This is expected behavior in SPA frameworks.

Supported Approach for Angular Applications

Option 1 (Recommended – Static Placement)

Place the preference link directly in your static index.html file (outside Angular-rendered components):

<a href="#" class="termly-display-preferences">Consent Preferences</a>

This ensures the link exists when Termly initializes and is the most reliable implementation.

Option 2 – Keeping the Link Inside the Angular Footer (SPA-Compatible Solution)

If the “Consent Preferences” link must remain inside your Angular footer, use the following approach.

Step 1: Add a Hidden Trigger in index.html

Place this inside your static index.html file:

<button
  id="termly-pref-trigger"
  type="button"
  class="termly-display-preferences"
  style="display:none;"
>
  Consent Preferences
</button>

This ensures Termly attaches its click handler during initialization.

Step 2: Trigger It Programmatically from Angular

In your Angular footer component:

TypeScript:

openConsentPreferences(event: Event) {
  event.preventDefault();
  const btn = document.getElementById('termly-pref-trigger') as HTMLButtonElement | null;
  btn?.click();
}

HTML:

<a href="#" (click)="openConsentPreferences($event)">
  Consent Preferences
</a>

Why This Works

  • Termly attaches its handler to the hidden button during page initialization.
  • Your Angular footer link programmatically triggers that hidden button.
  • The official Termly preferences modal opens correctly.
  • This maintains compliance and uses Termly’s supported mechanism.

Do You Need the Embed Script?

No.

When using the Resource Blocker script, the preference popup can be reopened using the termly-display-preferences class.

You do not need to switch to the embed script (embed.min.js) for this functionality.

 

Summary

In Angular SPAs:

  • Dynamic rendering prevents Termly from attaching click handlers to footer links.
  • The recommended solution is to include a static trigger in index.html.
  • Use a hidden button + programmatic click to keep the visible link inside Angular.

This approach is fully supported and compliant.

If you are using a different SPA framework (React, Vue, etc.), the same principle applies: ensure a static Termly trigger exists at initialization.

Related to

Related articles