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