Powerful Marquee for Angular (based on observers behavior)
npm install ngx-marqueenpm i ngx-marquee to install the library.
ts
import { NgxMarqueeModule } from 'ngx-marquee';
@NgModule({
imports: [ NgxMarqueeModule ],
...
})
export class AppModule { }
`
#### Use Component
`html
My ticker content
`
Demo
* Basic example
* Use Cases (advanced examples)
Resume properties
| Name | Type | Description |
| :--- | :----: | :--- |
| [direction] | string | Sets the controlling direction of _marquee_ movement. |
| [duration] | string | Sets the length of time that an animation takes to complete one cycle. |
| [pauseOnHover] | boolean | Set to pause the _marquee_ movement while hover user event. |
| [animation] | string | Sets animation entrance when the _marquee_ cycle starts. |
| [pendingUpdates] | boolean | Indicates that taskOnUpdateContent callback function will be executed when the current movement cycle has been finished. |
| [taskOnUpdateDuration] | function | 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. |
| [taskOnUpdateContent] | function | 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. |
| (pendingUpdatesChange) | boolean | This event indicates that the taskOnUpdateDuration or taskOnUpdateContent callbacks functions have been executed. |
| (playStateChange) | MarqueeState | This event indicates the current state movement of the _marquee_. |
$3
| Name | Description |
| :--- | :--- |
| playPause | Toggle the movement of the _marquee_ to play or pause. |
| stop | Stop the movement of the _marquee_. |
| restart | Restart the movement of the _marquee_ to the initial move point. |
API
input properties
$3
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"
$3
`html
My ticker text
`
$3
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.
$3
`html
My ticker text
`
$3
boolean Property set to pause the _marquee_ movement while hover user event.
default value: false
$3
`html
My ticker text
`
$3
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"
$3
`html
My ticker text
`
$3
boolean Property indicates that taskOnUpdateContent callback function will be executed when the current movement cycle has been finished.
default value: false
$3
`html
My ticker text
`
$3
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
`js
foo = (): string => {
// Some imaginative lines about the new duration of your marquee
// ...
return "90ms";
};
`
$3
`html
My ticker text
`
$3
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
`js
anotherFoo = (): void => {
// Some imaginative lines about the new content of your marquee
// ...
};
`
$3
`html
My ticker text
`
output properties
$3
This event indicates that the taskOnUpdateDuration or taskOnUpdateContent callbacks functions have been executed.
return: EventEmitter
> Note: You can take advantage of two-way data binding pattern for update pendingUpdates value simultaneously between your component logic and the _marquee_.
$3
`html
My ticker text
`
$3
This event indicates the current state movement of the _marquee_.
return: EventEmitter
#### possible values
* Running
* Paused
* Stopped
> Note: You can map these values to respective lowercase "running", "paused", or "stopped" string's value.
$3
`html
My ticker text
`
methods
$3
Toggle the movement of the _marquee_ to play or pause.
> Note: Sets and emit (by playStateChange event) the current MarqueeState to Running or Paused.
$3
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.
$3
Restart the movement of the _marquee_ to the initial move point.
> Note: Sets and emit (by playStateChange event) the current MarqueeState` to Running.