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.
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<string>(); ngOnInit() { this.eventList.push(`Lorem ipsum dolor sit amet, <s>consecteturs> 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 rutrum lorem quis, gravida tellus.`); } } |
CSS
There are several classes that help you to create your custom stylesapp.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. |
| News Ticker component For Angular | 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.
This awesome script developed by Albejr, Visit their official github repository for more information and follow for future updates.
