Powerful Marquee Component for Angular (based on observers behavior). Improved alternative to the deprecated HTML marquee tag.

This library was generated with Angular CLI.

Run npm i ngx-marquee to install the library.

import { NgxMarqueeModule } from 'ngx-marquee';

@NgModule({
  imports: [ NgxMarqueeModule ],
  ...
})
export class AppModule { }

<ngx-marquee>
  <mark class="ticker-custom">My ticker content</mark>
</ngx-marquee>

• Basic example
• Use Cases (advanced examples)

string Property sets the controlling direction of marquee movement.

default value: "left"

Note: The taskOnUpdateContent() callback function is not fired when direction value is "alternate".

• "left"
• "right"
• "alternate"

<ngx-marquee direction="right">
  <mark>My ticker text</mark>
</ngx-marquee>

string Property sets the length of time that an animation takes to complete one cycle.

default value: "20s"

Note: The duration string format must be a value preceded by a letter s or ms to denote time in seconds or milliseconds respectively.

<ngx-marquee duration="120s">
  <mark>My ticker text</mark>
</ngx-marquee>

boolean Property set to pause the marquee movement while hover user event.

default value: false

<ngx-marquee pauseOnHover="true">
  <mark>My ticker text</mark>
</ngx-marquee>

string Property sets animation entrance when the marquee cycle starts.

default value: "default"

Note: Only "default" animation is available when direction value is "alternate".

• "default"
• "slideInUp"
• "slideInDown"

<ngx-marquee animation="slideInUp">
  <mark>My ticker text</mark>
</ngx-marquee>

boolean Property indicates that taskOnUpdateContent callback function will be executed when the current movement cycle has been finished.

default value: false

<ngx-marquee pendingUpdates="false">
  <mark>My ticker text</mark>
</ngx-marquee>

function Customized callback function to be used to determine the new duration value that an animation takes to complete the next cycle. This callback function will be executed if pendingUpdates property is set on true and the current cycle of marquee movement has been finished.

return: string

Note: If taskOnUpdateDuration( ) function is not supplied, the duration value is considered.

foo = (): string => {
  // Some imaginative lines about the new duration of your marquee
  // ...
  return "90ms";
};

<ngx-marquee [taskOnUpdateDuration]="foo" pendingUpdates="true">
  <mark>My ticker text</mark>
</ngx-marquee>

function Customized callback function to be used to set new content in the next cycle. This callback function will be executed while pendingUpdates property is set on true and the current cycle of marquee movement has been finished.

return: void

Note: If taskOnUpdateContent( ) function is not supplied, the marquee remains unchanged.

anotherFoo = (): void => {
  // Some imaginative lines about the new content of your marquee
  // ...
};

<ngx-marquee [taskOnUpdateContent]="anotherFoo" pendingUpdates="true">
  <mark>My ticker text</mark>
</ngx-marquee>

This event indicates that the taskOnUpdateDuration or taskOnUpdateContent callbacks functions have been executed.

return: EventEmitter<boolean>

Note: You can take advantage of two-way data binding pattern for update pendingUpdates value simultaneously between your component logic and the marquee.

<ngx-marquee [(pendingUpdates)]="isPendingUpdate" [taskOnUpdateContent]="anotherFoo">
  <mark>My ticker text</mark>
</ngx-marquee>

This event indicates the current state movement of the marquee.

return: EventEmitter<MarqueeState>

• Running
• Paused
• Stopped

Note: You can map these values to respective lowercase "running", "paused", or "stopped" string's value.

<ngx-marquee (playStateChange)="listenerFoo($event)">
  <mark>My ticker text</mark>
</ngx-marquee>

Toggle the movement of the marquee to play or pause.

Note: Sets and emit (by playStateChange event) the current MarqueeState to Running or Paused.

Stop the movement of the marquee.

Note: Sets and emit (by playStateChange event) the current MarqueeState to Stopped. Also, set the marquee to the initial move point and set the value of pendingUpdates to false.

Restart the movement of the marquee to the initial move point.

Note: Sets and emit (by playStateChange event) the current MarqueeState to Running.

Inspired by https://github.com/shivarajnaidu/ng-marquee