NG-Ticker

html marquee implementation as angular component library.

Installation npm

$ npm install ng-ticker

Usage

Import the module

import { NgTickerModule } from 'ng-ticker';

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

Template

<ng-ticker></ng-ticker>

Options

| Name | | Type | Default | Description | | ------------- | -------- | ------- | ------- | ----------------------------------------------------------------------------------------------------------------------------- | | [direction] | optional | string | 'left' | Animation direction of content inside ng-ticker element | | [speed] | optional | string | '10s' | Speed of animation in direction in seconds. (speed need to be changed as width or content length on screen for better view) | | [steps] | optional | string | '' | Steps in animation transition to make vintage effect. | | [stopOnHover] | optional | Boolean | false | Stop ticker on hover | | [playState] | optional | Boolean | true | Defines play state of ticker content |

Styling guide

There are several classes that help you to create your custom styles app.component.css

:host ::ng-deep .ticker-container > span {
    // any style properties.
}