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.