News Ticker component For Angular

by

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

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();

  ngOnInit() {
    this.eventList.push(`Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sit amet nibh dolor.`);
    this.eventList.push(`${new Date().toLocaleString()} - Sed et ligula non risus ullamcorper rhoncus quis vel ante.`);
    this.eventList.push(`Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.`);
    this.eventList.push(`Fusce a odio interdum, I'm Anchor 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.

Published by Rohit