Albe News Ticker 2.9.0

Version history: | Library | Angular | | ------- | ------- | | Lastet | 18.0.1 | | 2.8.0 | 17.3.0 | | 2.7.0 | 16.0.0 | | 2.6.0 | 15.2.6 | | 2.5.0 | 14.2.1 | | 2.4.2 | 11.2.14 | | 2.2.7 | 10.1.2 | | 2.2.5 | 10.1.1 | | 2.1.2 | 8.1.2 | | 1.1.1 | 6.0.1 |

Installation

$ npm install ngx-newsticker-albe

Usage

Import the module

import { NgxNewstickerAlbeModule } from 'ngx-newsticker-albe';

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

Template

<ngx-newsticker title="Live News" [events]="eventList"></ngx-newsticker>

Component

export class AppComponent implements OnInit {
  eventList = new Array<string>();

  ngOnInit() {
    this.eventList.push(`Lorem ipsum dolor sit amet, <s>consectetur</s> adipiscing elit. Phasellus sit amet nibh dolor.`);
    this.eventList.push(`<span>${new Date().toLocaleString()}</span> - Sed et ligula non risus ullamcorper rhoncus quis vel ante.`);
    this.eventList.push(`<i>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.<i>`);
    this.eventList.push(`Fusce a odio interdum, <a href="#">I'm Anchor</a> rutrum lorem quis, gravida tellus.`);
  }
}

Options

| Name | | Type | Default | Description | | -------------- | -------- | ------------- | --------- | --------------------------------------------------------------- | | [events] | required | Array | [ ] | List of messages to be displayed. | | [title] | optional | String | '' | Highlighted text. | | [interval] | optional | Number | 3000 | Set the time (milliseconds) interval between the text exchange. | | [showCounter] | optional | Boolean | true | Sets the current count visibility. | | [defaultColor] | optional | String | '#1976D2' | Change the default blue color. | | [backColor] | optional | String | '#FFFFFF' | Change the back ground color of content. |

Styling guide

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

:host ::ng-deep .newsticker>.nt-content>label {
  color: #D32F2F;
}

Demo App

Follow these instructions to run the demo:

1. Clone the repository to your local machine
2. From the project folder, run npm i to install all required dependencies
3. Run ng b ngx-newsticker-albe to build in dist folder.
4. Run ng s to serve the project from a live-updating server.
5. Go to localhost:4200 to see the demo site