ng-vertical-timeline

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