News Ticker component For Angular

Are you looking for news ticker / news slider / headline flash in angular then here I am going to share awesome News Ticker component to help you accentuate posts and messages.

newsticker

Installation

Install component via NPM

npm install ngx-newsticker-albe

Template

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

Import the module

import { NgxNewstickerAlbeModule } from 'ngx-newsticker-albe';
 
@NgModule({
    imports: [ NgxNewstickerAlbeModule ],
    ...
})
export class AppModule {}

Component

Init the news slider component and setting news flash

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.`);
  }
}


CSS

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

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

Options:

Here are the list of options you can use to customize the plugin.

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.

See live demo and download source code.

DEMO | DOWNLOAD

This awesome script developed by Albejr, Visit their official github repository for more information and follow for future updates.


Don’t forget to Subscribe My Public Notebook for more useful free scripts, tutorials and articles.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.