Socket
Socket
Sign inDemoInstall

ngx-marquee

Package Overview
Dependencies
5
Maintainers
1
Versions
5
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

ngx-marquee

Powerful Marquee for Angular (based on observers behavior)


Version published
Maintainers
1
Weekly downloads
2,951
increased by16.5%

Weekly downloads

Readme

Source

ngx-marquee

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

Donate

This library was generated with Angular CLI.

How to install

Run npm i ngx-marquee to install the library.

How to use

Import Module
import { NgxMarqueeModule } from 'ngx-marquee';

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

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

Demo

Resume properties

NameTypeDescription
[direction]stringSets the controlling direction of marquee movement.
[duration]stringSets the length of time that an animation takes to complete one cycle.
[pauseOnHover]booleanSet to pause the marquee movement while hover user event.
[animation]stringSets animation entrance when the marquee cycle starts.
[pendingUpdates]booleanIndicates that taskOnUpdateContent callback function will be executed when the current movement cycle has been finished.
[taskOnUpdateDuration]functionCallback 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.
[taskOnUpdateContent]functionCallback 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.
(pendingUpdatesChange)booleanThis event indicates that the taskOnUpdateDuration or taskOnUpdateContent callbacks functions have been executed.
(playStateChange)MarqueeStateThis event indicates the current state movement of the marquee.

Resume methods

NameDescription
playPauseToggle the movement of the marquee to play or pause.
stopStop the movement of the marquee.
restartRestart the movement of the marquee to the initial move point.

API

input properties

@Input() direction

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".

possible values
  • "left"
  • "right"
  • "alternate"

Example

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

@Input() duration

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.

Example

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

@Input() pauseOnHover

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

default value: false

Example

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

@Input() animation

string Property sets animation entrance when the marquee cycle starts.

default value: "default"

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

possible values
  • "default"
  • "slideInUp"
  • "slideInDown"

Example

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

@Input() pendingUpdates

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

default value: false

Example

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

@Input() taskOnUpdateDuration

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.

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

Example

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

@Input() taskOnUpdateContent

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.

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

Example

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

output properties

@Output() pendingUpdatesChange

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.

Example

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

@Output() playStateChange

This event indicates the current state movement of the marquee.

return: EventEmitter<MarqueeState>

possible values
  • Running
  • Paused
  • Stopped

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

Example

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

methods

playPause( ): void

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( ): void

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( ): void

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

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

Any contributions are appreciated

paypal

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

Keywords

FAQs

Last updated on 29 Jan 2022

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc