https://github.com/albejr/ngx-newsticker
News Ticker component to help you accentuate posts and messages.
https://github.com/albejr/ngx-newsticker
angular breakingnews marquee newsticker
Last synced: 8 months ago
JSON representation
News Ticker component to help you accentuate posts and messages.
- Host: GitHub
- URL: https://github.com/albejr/ngx-newsticker
- Owner: Albejr
- Created: 2018-05-10T23:34:22.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2024-03-20T18:11:23.000Z (about 2 years ago)
- Last Synced: 2025-09-26T13:17:49.787Z (9 months ago)
- Topics: angular, breakingnews, marquee, newsticker
- Language: TypeScript
- Homepage: https://stackblitz.com/edit/ngx-newsticker-albe
- Size: 8.87 MB
- Stars: 7
- Watchers: 1
- Forks: 5
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Albe News Ticker 2.8.0
A horizontal display dedicated to presenting small news. Styles for the template are easily customizable.
Version history:
| Library | Angular |
| ------- | ------- |
| Lastet | 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
```html
$ npm install ngx-newsticker-albe
```
## Usage
### Import the module
```typescript
import { NgxNewstickerAlbeModule } from 'ngx-newsticker-albe';
@NgModule({
imports: [ NgxNewstickerAlbeModule ],
...
})
export class AppModule {}
```
### Template
```html
```
### 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`
```css
:host ::ng-deep .newsticker>.nt-content>label {
color: #D32F2F;
}
```
### Component
```typescript
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.`);
}
}
```
## 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