fix(popover): use afterRenderEffect() instead of effect() to avoid NG0500: During hydration expected...

xidedix · xidedix · commit 0a863c106e6c · 2025-08-12T12:15:25.000+02:00
diff --git a/projects/coreui-angular/src/lib/popover/popover.directive.ts b/projects/coreui-angular/src/lib/popover/popover.directive.ts
@@ -1,4 +1,5 @@
 import {
+  afterRenderEffect,
   AfterViewInit,
   ChangeDetectorRef,
   ComponentRef,
@@ -100,8 +101,12 @@ export class PopoverDirective implements OnDestroy, OnInit, AfterViewInit {
    */
   readonly visible = model(false, { alias: 'cPopoverVisible' });
 
-  readonly #visibleEffect = effect(() => {
-    this.visible() ? this.addTooltipElement() : this.removeTooltipElement();
+  readonly #visibleEffect = afterRenderEffect({
+    // this fixes RuntimeError: NG0500: During hydration Angular expected <abc> but found <xyz>.
+    // Find more at https://angular.dev/errors/NG0500
+    write: () => {
+      this.visible() ? this.addTooltipElement() : this.removeTooltipElement();
+    }
   });
 
   get ariaDescribedBy(): string | null {
