feat/update:

- updated logic and version for angular v20
- switched logic from ElementRef to Templates to keep element bindings

Author: Markus Block

README.md

@@ -44,6 +44,8 @@ import {NgxMarqueeComponent} from '@omnedia/ngx-marquee';
 
 Use the component in your template:
 
+### Version 1.\*.\* - 2.\*.\*
+
 ```html
 
 <om-marquee
@@ -65,6 +67,35 @@ Use the component in your template:
 </om-marquee>
 ```
 
+### Version ^3.\*.\*
+
+```html
+
+<om-marquee
+  [reverse]="true"
+  [animationDuration]="'10s'"
+  [marqueeGap]="'2rem'"
+  [pauseOnHover]="true"
+  styleClass="custom-marquee"
+>
+  <ng-template>
+    <div class="item">
+      Item 1
+    </div>
+  </ng-template>
+  <ng-template>
+    <div class="item">
+      Item 2
+    </div>
+  </ng-template>
+  <ng-template>
+    <div class="item">
+      Item 3
+    </div>
+  </ng-template>
+</om-marquee>
+```
+
 How It Works
 
 - Customizable Direction and Animation: You can set the marquee to scroll content horizontally or vertically by setting the vertical input. You can also control the speed, gap between items, reverse the scroll direction, and pause the scroll when hovered.

package.json

@@ -1,10 +1,10 @@
 {
   "name": "@omnedia/ngx-marquee",
   "description": "A simple component library to create an infinite scrolling marquee with your content.",
-  "version": "2.2.0",
+  "version": "3.0.0",
   "peerDependencies": {
-    "@angular/common": "^19.0.0",
-    "@angular/core": "^19.0.0"
+    "@angular/common": "^20.0.0",
+    "@angular/core": "^20.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.0"

src/lib/ngx-marquee.component.html

@@ -6,28 +6,33 @@
   [ngClass]="styleClass"
   #OmMarquee
 >
-  <div class="om-marquee-invisible">
-    <ng-content></ng-content>
-  </div>
-  <div class="om-marquee-content" [class.outOfView]="!isInView" [class.scrollable]="scrollable">
+  <div class="om-marquee-content" [class.outOfView]="!isInView()" [class.scrollable]="scrollable">
     <div class="om-marquee-item-wrapper">
-      @for (content of marqueeElements; track $index) {
-      <div class="om-marquee-item" [innerHTML]="content"></div>
+      @for (template of templates; track $index) {
+        <div class="om-marquee-item">
+          <ng-container *ngTemplateOutlet="template; context: { index: $index }"></ng-container>
+        </div>
       }
     </div>
     <div class="om-marquee-item-wrapper">
-      @for (content of marqueeElements; track $index) {
-      <div class="om-marquee-item" [innerHTML]="content"></div>
+      @for (template of templates; track $index) {
+        <div class="om-marquee-item">
+          <ng-container *ngTemplateOutlet="template; context: { index: $index }"></ng-container>
+        </div>
       }
     </div>
     <div class="om-marquee-item-wrapper">
-      @for (content of marqueeElements; track $index) {
-      <div class="om-marquee-item" [innerHTML]="content"></div>
+      @for (template of templates; track $index) {
+        <div class="om-marquee-item">
+          <ng-container *ngTemplateOutlet="template; context: { index: $index }"></ng-container>
+        </div>
       }
     </div>
     <div class="om-marquee-item-wrapper">
-      @for (content of marqueeElements; track $index) {
-      <div class="om-marquee-item" [innerHTML]="content"></div>
+      @for (template of templates; track $index) {
+        <div class="om-marquee-item">
+          <ng-container *ngTemplateOutlet="template; context: { index: $index }"></ng-container>
+        </div>
       }
     </div>
   </div>

src/lib/ngx-marquee.component.scss

@@ -7,13 +7,6 @@
   width: 100%;
   height: 100%;
 
-  .om-marquee-invisible {
-    width: 0;
-    height: 0;
-    display: none;
-    pointer-events: none;
-  }
-
   .om-marquee-content {
     width: 100%;
     height: 100%;
@@ -35,8 +28,7 @@
 
       .om-marquee-item-wrapper {
         flex-direction: row;
-        animation: om-marquee-row var(--om-marquee-animation-duration) infinite
-          linear var(--om-marquee-reverse);
+        animation: om-marquee-row var(--om-marquee-animation-duration) infinite linear var(--om-marquee-reverse);
       }
     }
   }
@@ -47,8 +39,7 @@
 
       .om-marquee-item-wrapper {
         flex-direction: column;
-        animation: om-marquee-column var(--om-marquee-animation-duration)
-          infinite linear var(--om-marquee-reverse);
+        animation: om-marquee-column var(--om-marquee-animation-duration) infinite linear var(--om-marquee-reverse);
       }
     }
   }

src/lib/ngx-marquee.component.ts

@@ -1,8 +1,7 @@
-import { CommonModule, isPlatformBrowser } from "@angular/common";
+import {CommonModule, isPlatformBrowser} from "@angular/common";
 import {
-  AfterContentChecked,
   AfterViewInit,
-  ChangeDetectorRef,
+  ChangeDetectionStrategy,
   Component,
   ContentChildren,
   ElementRef,
@@ -12,27 +11,26 @@ import {
   OnDestroy,
   PLATFORM_ID,
   QueryList,
+  signal,
   SimpleChanges,
+  TemplateRef,
   ViewChild,
 } from "@angular/core";
-import { DomSanitizer, SafeHtml } from "@angular/platform-browser";
-import { Subject } from "rxjs";
+import {Subject} from "rxjs";
 
 @Component({
   selector: "om-marquee",
   standalone: true,
   imports: [CommonModule],
   templateUrl: "./ngx-marquee.component.html",
   styleUrl: "./ngx-marquee.component.scss",
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class NgxMarqueeComponent
-  implements AfterViewInit, AfterContentChecked, OnDestroy, OnChanges
-{
+  implements AfterViewInit, OnDestroy, OnChanges {
   @ViewChild("OmMarquee") marqueeRef!: ElementRef<HTMLElement>;
 
-  @ContentChildren("OmMarqueeContent") elementRefs?: QueryList<
-    ElementRef<HTMLElement>
-  >;
+  @ContentChildren(TemplateRef) templates!: QueryList<TemplateRef<any>>;
 
   @Input("styleClass")
   styleClass?: string;
@@ -83,32 +81,23 @@ export class NgxMarqueeComponent
 
   style: any = {};
 
-  marqueeElements: SafeHtml[] = [];
-
-  isInView = false;
+  isInView = signal(false);
   private intersectionObserver?: IntersectionObserver;
 
-  private contentSnapshot: string[] = [];
-
   constructor(
-    private readonly sanitizer: DomSanitizer,
-    private cdr: ChangeDetectorRef,
     @Inject(PLATFORM_ID) private platformId: object,
-  ) {}
+  ) {
+  }
 
   ngAfterViewInit(): void {
-    this.getMarqueeContent();
-
     if (isPlatformBrowser(this.platformId)) {
       this.intersectionObserver = new IntersectionObserver(([entry]) => {
         if (entry.isIntersecting) {
-          if (!this.isInView) {
-            this.isInView = true;
-            this.cdr.detectChanges();
+          if (!this.isInView()) {
+            this.isInView.set(true);
           }
         } else if (this.isInView) {
-          this.isInView = false;
-          this.cdr.detectChanges();
+          this.isInView.set(false);
         }
       });
       this.intersectionObserver.observe(this.marqueeRef.nativeElement);
@@ -119,24 +108,6 @@ export class NgxMarqueeComponent
     }
   }
 
-  ngAfterContentChecked() {
-    if (!this.elementRefs) {
-      return;
-    }
-
-    const currentContentSnapshot = this.elementRefs.map(
-      (ref) => ref.nativeElement.innerHTML,
-    );
-
-    if (
-      JSON.stringify(this.contentSnapshot) !==
-      JSON.stringify(currentContentSnapshot)
-    ) {
-      this.contentSnapshot = currentContentSnapshot;
-      this.getMarqueeContent();
-    }
-  }
-
   ngOnChanges(changes: SimpleChanges): void {
     if (changes["scrollable"] && !changes["scrollable"].firstChange) {
       const newVal = changes["scrollable"].currentValue;
@@ -165,20 +136,6 @@ export class NgxMarqueeComponent
     this.unListeners = [];
   }
 
-  private getMarqueeContent(): void {
-    if (!this.elementRefs) {
-      return;
-    }
-
-    this.marqueeElements = this.elementRefs?.toArray().map((ref) => {
-      return this.sanitizer.bypassSecurityTrustHtml(
-        ref.nativeElement.outerHTML,
-      );
-    });
-
-    this.cdr.detectChanges();
-  }
-
   private initDragEvents(): void {
     const marqueeContent = this.marqueeRef.nativeElement.querySelector(
       ".om-marquee-content",
@@ -226,7 +183,7 @@ export class NgxMarqueeComponent
 
       const gap = parseFloat(
         getComputedStyle(firstWrapper).getPropertyValue("--om-marquee-gap") ||
-          "0",
+        "0",
       );
 
       const limit = -(wrapperSize + gap);
@@ -257,7 +214,7 @@ export class NgxMarqueeComponent
 
       const gap = parseFloat(
         getComputedStyle(firstWrapper).getPropertyValue("--om-marquee-gap") ||
-          "0",
+        "0",
       );
 
       const totalDistance = wrapperSize + gap;