https://github.com/callyafiune/ngx-vertical-timeline
Module for creating Responsive Vertical Timeline
https://github.com/callyafiune/ngx-vertical-timeline
Last synced: 3 months ago
JSON representation
Module for creating Responsive Vertical Timeline
- Host: GitHub
- URL: https://github.com/callyafiune/ngx-vertical-timeline
- Owner: callyafiune
- Created: 2020-01-27T16:51:43.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2025-08-08T22:13:08.000Z (3 months ago)
- Last Synced: 2025-08-08T22:57:38.210Z (3 months ago)
- Language: CSS
- Size: 1.29 MB
- Stars: 2
- Watchers: 1
- Forks: 3
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- fucking-awesome-angular - ngx-vertical-timeline - An Angular component for creating a responsive vertical timeline. (Third Party Components / Dates)
- awesome-angular - ngx-vertical-timeline - An Angular component for creating a responsive vertical timeline. (Third Party Components / Dates)
README
# Angular Vertical Timeline (Angular 18 Version)
An Angular component for creating a responsive vertical timeline. This is an updated version for Angular 18+ using standalone components.
### Live Example
[On Stackblitz](https://stackblitz.com/~/github.com/callyafiune/ngx-vertical-timeline) (link to original example)
## Installation
```bash
$ npm i ngx-vertical-timeline
```
## Usage
### Import
Since Angular 18 uses standalone components, you no longer need to import `NgxVerticalTimelineModule`. You can directly import the `NgxVerticalTimelineComponent` into your component.
```typescript
// your.component.ts
import { Component } from '@angular/core';
import { NgxVerticalTimelineComponent } from 'ngx-vertical-timeline';
@Component({
selector: 'app-your-component',
standalone: true,
imports: [NgxVerticalTimelineComponent], // Import the component here
template: `
`
})
export class YourComponent {
// ...
}
```
### Component
```typescript
// your.component.ts
import { Component, OnInit } from '@angular/core';
import { TimelineItem } from 'ngx-vertical-timeline';
// ...
export class YourComponent implements OnInit {
items: TimelineItem[] = [];
externalVariable = 'hello';
ngOnInit(): void {
const self = this;
this.items.push({
label: 'Action',
icon: 'fa fa-calendar-plus-o',
content: `Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.`,
title: '18 de June, 2019, 10:12',
command() {
alert(`test: ${self.externalVariable}`);
}
});
this.items.push({
label: 'Action',
icon: 'fa fa-plus',
content: `Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.`,
title: '11 de November, 2019, 12:00',
command() {
alert('Action!');
}
});
}
}
```
### Template
```html
```