ngx-advanced-marquee

A lightweight, customizable, and high-performance marquee component for Angular (v14 → v22).

Supports text, cards, images, custom templates, gradients, infinite scrolling, pause on hover, and dynamic styling.

Perfect for news tickers, announcements, dashboards, alerts, and scrolling cards.

✨ Features

• ✅ Angular 14 → 22 support
• ✅ Standalone component (no module required)
• ✅ Infinite continuous scrolling
• ✅ Auto speed calculation
• ✅ Pause on hover
• ✅ Left / Right direction
• ✅ Dynamic gap spacing
• ✅ Dark / Light variants
• ✅ Color themes
• ✅ Gradient fade edges
• ✅ Custom template support
• ✅ Works with text, cards, images
• ✅ SSR safe
• ✅ ResizeObserver responsive

📦 Installation

npm install ngx-advanced-marquee

🚀 Basic Usage

Import the component in your Angular component.

import { Component } from '@angular/core';
import { MarqueeComponent } from 'ngx-advanced-marquee';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [MarqueeComponent],
  templateUrl: './app.component.html',
})
export class AppComponent {
  news = [
    'Angular is awesome',
    'Angular 17 Standalone Apps',
    'Testing ngx-advanced-marquee',
    'Infinite marquee scrolling',
  ];
}

<ngx-advanced-marquee [items]="news"></ngx-advanced-marquee>

🎯 Infinite Marquee Example

<ngx-advanced-marquee [items]="news" [speed]="80" [gap]="40"></ngx-advanced-marquee>

🎨 Variant Styling

Dark Variant

<ngx-advanced-marquee [items]="news" variant="dark" color="error"></ngx-advanced-marquee>

Light Variant

<ngx-advanced-marquee [items]="news" variant="light" color="error"></ngx-advanced-marquee>

🌈 Available Colors

• error
• success
• sky-blue
• yellow
• pink
• orange
• blue
• info
• secondary

Example:

<ngx-advanced-marquee [items]="news" color="success"></ngx-advanced-marquee>

🎛 Inputs

| Input | Type | Default | Description | | ------------- | --------------------- | -------- | ------------------------- | | items | any[] | [] | Array of items to display | | speed | number | 73 | Scroll speed | | gap | number | 40 | Space between items | | direction | 'left' | 'right' | 'left' | Scroll direction | | pauseOnHover | boolean | true | Pause animation on hover | | gradient | boolean | false | Enable gradient fade | | gradientWidth | number | 50 | Gradient size | | variant | 'dark' | 'light' | '' | Styling variant | | color | string | '' | Color theme |

🧩 Custom Template Example

You can render custom HTML like cards, images, or badges.

<ngx-advanced-marquee [items]="cards" [gap]="50">
  <ng-template let-item>
    <div class="card">
      <h4>{{item.title}}</h4>
      <p>{{item.value}}</p>
    </div>
  </ng-template>
</ngx-advanced-marquee>

Component Data

cards = [
  { title: 'Users', value: '1,240' },
  { title: 'Orders', value: '$320' },
  { title: 'Revenue', value: '$12,500' },
];

🖼 Cards Example CSS

.card {
  padding: 20px;
  border-radius: 10px;
  background: #f5f5f5;
  min-width: 180px;
  text-align: center;
}

🧊 Gradient Example

<ngx-advanced-marquee [items]="news" [gradient]="true" [gradientWidth]="80"></ngx-advanced-marquee>

🛑 Pause On Hover

<ngx-advanced-marquee [items]="news" [pauseOnHover]="true"></ngx-advanced-marquee>

📱 Responsive

The marquee automatically adjusts speed and layout using ResizeObserver.

⚡ Performance

• Uses CSS GPU animation
• No heavy dependencies
• Optimized for large lists
• Supports SSR

🧑‍💻 Angular Compatibility

| Angular Version | Supported | | --------------- | --------- | | Angular 14 | ✅ | | Angular 15 | ✅ | | Angular 16 | ✅ | | Angular 17 | ✅ | | Angular 18 | ✅ | | Angular 19 | ✅ | | Angular 20 | ✅ | | Angular 21 | ✅ | | Angular 22 | ✅ |

📜 License

MIT License

❤️ Contributing

Contributions are welcome.

If you find a bug or want a feature, please open an issue.

⭐ Support

If you like this library:

• ⭐ Star the repository
• 📦 Share it with the Angular community