ng-timeline-vertical

NgTimelineVertical

Inpired from : https://codepen.io/codyhouse/pen/FdkEf

Set of directive to display a vertical timeline on Angular.

Tested with

Framwork	Version
Angular	5+
Ionic	3+

Installation

npm i --save ng-timeline-vertical

Usage

<ng-timeline-vertical>
  <ng-timeline-item *ngFor="let item of timelineList"
    title="{{item.label}}"
    content="{{item.text}}"
    date="{{item.date_created}}"
    button="{{{title:'Read more', action: item.url}}}">
  </ng-timeline-item>
</ng-timeline-vertical>

Directive API

Name	Value	Mandatory	Comment
title	string	Yes
content	string	No
date	string	No	Date must be already formatted for display
button	{title: string, action: any}	No

Transclusion

In the case you want to send custom html content into an item, it is possible to transclude some content inside a timeline item.
Example :

<ng-timeline-vertical>
  <ng-timeline-item
    title="Racoon per country"
    date="2012">
      <table style="width:100%">
        <tr>
          <th>Country</th>
          <th>Nb</th> 
        </tr>
        <tr>
          <td>USA</td>
          <td>500 000</td> 
        </tr>
        <tr>
          <td>Canada</td>
          <td>350 000</td> 
        </tr>
      </table>
  </ng-timeline-item>
</ng-timeline-vertical>

You can add as much transcluded content as you want in combination with the directive attributes.
The order of display is : Title, content, transclusion, button

TODO

• Animations