OmNxgRipple (NGXUI) full-screen wrapper blocking clicks on child elements

I am trying to create a wrapper component in Angular that shows a background ripple animation (using @omnedia/ngx-ripple) over the entire page, but leaves all inputs, links, and buttons in the foreground interactive. I have tried various solutions, but my content always gets stuck (clicks don't propagate) or I never see the ripple. Below I describe how I set up the code and where I encounter the problem.

Context:

I am using Angular (v19) and Tailwind CSS for styles.

I installed @omnedia/ngx-ripple successfully (e.g., npm install @omnedia/ngx-ripple).

I want my entire “Coming Soon” page to be wrapped in a wrapper that shows the full-screen ripple, but does not block interactions on internal components (inputs, links, buttons, etc.).

I initially tried using directly as the parent of all content, but then the children are no longer clickable.

CODE:

coming-soon-page Template:

<app-ripple-background>
<div class="bg-neutral-900">
<app-topbar></app-topbar>
<div class="min-h-screen flex flex-col items-center justify-center text-center bg-neutral-900 text-white px-4">
<om-gradient-text [text]="'Coming Soon'"
[styleClass]="'mb-4 font-extrabold text-6xl md:text-8xl'"></om-gradient-text>
<p class="text-lg md:text-xl mb-8 max-w-2xl mt-6">
A smarter way to receive curated tech, development, and cybersecurity insights — powered by AI.
<span class="inline-flex items-center mt-1">
<svg height="24" width="24" fill="#FFFFFF" viewBox="0 0 24 24" data-name="Layer 1" id="Layer_1" class="sparkle">
<path
d="M10,21.236,6.755,14.745.264,11.5,6.755,8.255,10,1.764l3.245,6.491L19.736,11.5l-6.491,3.245ZM18,21l1.5,3L21,21l3-1.5L21,18l-1.5-3L18,18l-3,1.5ZM19.333,4.667,20.5,7l1.167-2.333L24,3.5,21.667,2.333,20.5,0,19.333,2.333,17,3.5Z"></path>
</svg>
</span>
</p>
<form class="flex flex-col sm:flex-row items-center sm:items-start gap-2 w-full max-w-md mx-auto">
<input
type="email"
placeholder="Enter your email"
class="p-3 rounded-lg text-white w-full bg-neutral-800"
required
/>
<button type="submit" class="notify-btn">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bel-2" viewBox="0 0 256 256">
<path fill="#000"
d="M224 71.1a8 8 0 0 1-10.78-3.42a94.13 94.13 0 0 0-33.46-36.91a8 8 0 1 1 8.54-13.54a111.46 111.46 0 0 1 39.12 43.09A8 8 0 0 1 224 71.1M35.71 72a8 8 0 0 0 7.1-4.32a94.13 94.13 0 0 1 33.46-36.91a8 8 0 1 0-8.54-13.54a111.46 111.46 0 0 0-39.12 43.09A8 8 0 0 0 35.71 72m186.1 103.94A16 16 0 0 1 208 200h-40.8a40 40 0 0 1-78.4 0H48a16 16 0 0 1-13.79-24.06C43.22 160.39 48 138.28 48 112a80 80 0 0 1 160 0c0 26.27 4.78 48.38 13.81 63.94M150.62 200h-45.24a24 24 0 0 0 45.24 0M208 184c-10.64-18.27-16-42.49-16-72a64 64 0 0 0-128 0c0 29.52-5.38 53.74-16 72Z"/>
</svg>
<span class="text">Notify Me</span>
<span class="circle"></span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bel-1" viewBox="0 0 256 256">
<path fill="#fff"
d="M224 71.1a8 8 0 0 1-10.78-3.42a94.13 94.13 0 0 0-33.46-36.91a8 8 0 1 1 8.54-13.54a111.46 111.46 0 0 1 39.12 43.09A8 8 0 0 1 224 71.1M35.71 72a8 8 0 0 0 7.1-4.32a94.13 94.13 0 0 1 33.46-36.91a8 8 0 1 0-8.54-13.54a111.46 111.46 0 0 0-39.12 43.09A8 8 0 0 0 35.71 72m186.1 103.94A16 16 0 0 1 208 200h-40.8a40 40 0 0 1-78.4 0H48a16 16 0 0 1-13.79-24.06C43.22 160.39 48 138.28 48 112a80 80 0 0 1 160 0c0 26.27 4.78 48.38 13.81 63.94M150.62 200h-45.24a24 24 0 0 0 45.24 0M208 184c-10.64-18.27-16-42.49-16-72a64 64 0 0 0-128 0c0 29.52-5.38 53.74-16 72Z"/>
</svg>
</button>
</form>
<div class="flex items-center justify-center text-center mt-8 gap-2">
<a href="https://github.com/C0MPL3XDEV" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
<path stroke-dasharray="32" stroke-dashoffset="32"
d="M12 4c1.67 0 2.61 0.4 3 0.5c0.53 -0.43 1.94 -1.5 3.5 -1.5c0.34 1 0.29 2.22 0 3c0.75 1 1 2 1 3.5c0 2.19 -0.48 3.58 -1.5 4.5c-1.02 0.92 -2.11 1.37 -3.5 1.5c0.65 0.54 0.5 1.87 0.5 2.5c0 0.73 0 3 0 3M12 4c-1.67 0 -2.61 0.4 -3 0.5c-0.53 -0.43 -1.94 -1.5 -3.5 -1.5c-0.34 1 -0.29 2.22 0 3c-0.75 1 -1 2 -1 3.5c0 2.19 0.48 3.58 1.5 4.5c1.02 0.92 2.11 1.37 3.5 1.5c-0.65 0.54 -0.5 1.87 -0.5 2.5c0 0.73 0 3 0 3">
<animate fill="freeze" attributeName="stroke-dashoffset" dur="0.7s" values="32;0"/>
</path>
<path stroke-dasharray="10" stroke-dashoffset="10"
d="M9 19c-1.41 0 -2.84 -0.56 -3.69 -1.19c-0.84 -0.63 -1.09 -1.66 -2.31 -2.31">
<animate fill="freeze" attributeName="stroke-dashoffset" begin="0.8s" dur="0.2s" values="10;0"/>
</path>
</g>
</svg>
</a>
<a href="https://instagram.com/carmine.developer" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<circle cx="17" cy="7" r="1.5" fill="currentColor" fill-opacity="0">
<animate fill="freeze" attributeName="fill-opacity" begin="1.3s" dur="0.15s" values="0;1"/>
</circle>
<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
<path stroke-dasharray="72" stroke-dashoffset="72"
d="M16 3c2.76 0 5 2.24 5 5v8c0 2.76 -2.24 5 -5 5h-8c-2.76 0 -5 -2.24 -5 -5v-8c0 -2.76 2.24 -5 5 -5h4Z">
<animate fill="freeze" attributeName="stroke-dashoffset" dur="0.6s" values="72;0"/>
</path>
<path stroke-dasharray="28" stroke-dashoffset="28"
d="M12 8c2.21 0 4 1.79 4 4c0 2.21 -1.79 4 -4 4c-2.21 0 -4 -1.79 -4 -4c0 -2.21 1.79 -4 4 -4">
<animate fill="freeze" attributeName="stroke-dashoffset" begin="0.7s" dur="0.6s" values="28;0"/>
</path>
</g>
</svg>
</a>
</div>
<footer class="mt-12 text-sm text-gray-400">
&copy; {{ date.getFullYear() }} C0MPL3XDEV — All rights reserved.
</footer>
</div>
</div>
</app-ripple-background>```

background component template:

<om-ripple
[rippleBorderColor]="'rgba(255, 255, 255, 0.7)'"
[rippleColor]="'rgba(174, 174, 174, 0.54)'">
<ng-content></ng-content>
</om-ripple>

Continue reading...