From e9683b928698c807c65b457620581a7dcf26a712 Mon Sep 17 00:00:00 2001 From: Johnny McQuade Date: Mon, 9 Dec 2024 11:02:52 +0000 Subject: [PATCH 1/2] fix: sticky header position --- .../sticky/display-group-sticky.component.scss | 4 ++-- .../display-group/sticky/display-group-sticky.component.ts | 7 +++++++ 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/src/app/shared/components/template/components/layout/display-group/sticky/display-group-sticky.component.scss b/src/app/shared/components/template/components/layout/display-group/sticky/display-group-sticky.component.scss index d0cee6b21..23ddd1298 100644 --- a/src/app/shared/components/template/components/layout/display-group/sticky/display-group-sticky.component.scss +++ b/src/app/shared/components/template/components/layout/display-group/sticky/display-group-sticky.component.scss @@ -10,10 +10,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/src/app/shared/components/template/components/layout/display-group/sticky/display-group-sticky.component.ts b/src/app/shared/components/template/components/layout/display-group/sticky/display-group-sticky.component.ts index 242e067e9..ed531e9e9 100644 --- a/src/app/shared/components/template/components/layout/display-group/sticky/display-group-sticky.component.ts +++ b/src/app/shared/components/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)); From 7757a505305dd830a2040fdf47d7c15761f8f505 Mon Sep 17 00:00:00 2001 From: Johnny McQuade Date: Mon, 9 Dec 2024 11:07:37 +0000 Subject: [PATCH 2/2] chore: tidy comment --- .../display-group/sticky/display-group-sticky.component.scss | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/app/shared/components/template/components/layout/display-group/sticky/display-group-sticky.component.scss b/src/app/shared/components/template/components/layout/display-group/sticky/display-group-sticky.component.scss index 23ddd1298..94ac72eac 100644 --- a/src/app/shared/components/template/components/layout/display-group/sticky/display-group-sticky.component.scss +++ b/src/app/shared/components/template/components/layout/display-group/sticky/display-group-sticky.component.scss @@ -8,8 +8,6 @@ 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 &[sticky-position="top"] { top: 0; }