Merge pull request #2608 from IDEMSInternational/fix/sticky-header-po…

…sition fix: sticky header position
IDEMSInternational · Dec 9, 2024 · 1b66b3e · 1b66b3e
2 parents 0a4c034 + 7757a50
commit 1b66b3e
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 4 deletions.
diff --git a/...nents/template/components/layout/display-group/sticky/display-group-sticky.component.scss b/...nents/template/components/layout/display-group/sticky/display-group-sticky.component.scss
@@ -8,12 +8,10 @@
   background-color: var(--ion-background-color);
   z-index: 10;
 
-  // use provided inputs to specify host top/bottom as signals do not nicely
-  // map to hostAttribute https://github.com/angular/angular/issues/53888
-  &[ng-reflect-position="top"] {
+  &[sticky-position="top"] {
     top: 0;
   }
-  &[ng-reflect-position="bottom"] {
+  &[sticky-position="bottom"] {
     bottom: 0;
   }
 }
diff --git a/...ponents/template/components/layout/display-group/sticky/display-group-sticky.component.ts b/...ponents/template/components/layout/display-group/sticky/display-group-sticky.component.ts
@@ -1,6 +1,7 @@
 import {
   AfterViewInit,
   Component,
+  HostBinding,
   input,
   OnDestroy,
   signal,
@@ -18,6 +19,12 @@ import {
 export class TmplDisplayGroupStickyComponent implements AfterViewInit, OnDestroy {
   position = input.required<"top" | "bottom">();
   height = signal(0);
+  // use hostBinding to specify host top/bottom as signals do not nicely
+  // map to hostAttribute https://github.com/angular/angular/issues/53888
+  @HostBinding("attr.sticky-position")
+  get stickyPosition() {
+    return this.position();
+  }
 
   private resizeObserver = new ResizeObserver((entries) => this.handleSizeChange(entries));