Angular2+ Vertical Timeline
Angular Vertical Timeline is an Angular 2+ Component that generates a vertical timeline with events.
Download & Installation
$ npm i ng-vertical-timeline
Key features
- Automatic ordering of the events
- Responsive layout for mobile applications
- Customisation made easily
Demo
Editor / Demo
Usage
1 - Add the NgVerticalTimelineModule module to your app.module.ts file:
import { NgVerticalTimelineModule } from 'ng-vertical-timeline';
...
@NgModule({
imports: [
...
NgVerticalTimelineModule
],
...
2 - Create an array of events
events = [
{
id: 0,
title: 'My last travel',
content: 'There are so much countries in the world...',
date: '2016 - 2019',
icon: 'https://image.flaticon.com/icons/svg/214/214335.svg'
},
{
id: 1,
title: 'My Job',
content: 'The best job I could possibly get!',
date: '2015 - 2016',
icon: 'https://image.flaticon.com/icons/svg/1006/1006517.svg'
},
{
id: 2,
title: 'My Education',
content: 'This is the university I went...',
date: '2011',
icon: 'https://image.flaticon.com/icons/svg/1141/1141771.svg'
}
];
3 - Add the selector ng-vertical-timeline to your componenent:
<ng-vertical-timeline [data]="events"></ng-vertical-timeline>
That's all!
License
This project is licensed under the MIT License