angular2-timeline
TypeScript icon, indicating that this package has built-in type declarations

0.0.4 • Public • Published

angular2-timeline

Usage & Demo

Sample Demo

Demo

Installation

Install using npm

> npm i angular2-timeline

Add Timeline Module

import {TimelineModule} from "angular2-timeline"; 
 
@NgModule({
    ...
  imports[
    TimelineModule,
    ...
  ],

Exposed Components

  • TimelineComponent
  • TimelineItemCompoenent

How to use

<timeline>
  <timeline-item>
 <!-- your content here -->
  </timeline-item>
</timeline>

Create a simple timeline

import {Component} from '@angular/core';
 
@Component({
  selector: 'app-root',
  template: `
    <button (click)="more.push(0)">Add More</button>
    <timeline>
      <timeline-item>
        <div style="background-color: azure;padding: 10px;box-shadow: 3px 3px 15px 3px #6565656b;">
          <h1>Title</h1>
          <h4>Subtitle</h4>
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
            industry's
            standard dummy text ever since the 1500s.</p>
        </div>
      </timeline-item>
      <timeline-item>
        <div style="background-color: azure;padding: 10px;box-shadow: 3px 3px 15px 3px #6565656b;">
          <h1>Title</h1>
          <h4>Subtitle</h4>
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
            industry's
            standard dummy text ever since the 1500s.</p>
        </div>
      </timeline-item>
      <timeline-item *ngFor="let i of more">
        <div style="background-color: azure;padding: 10px;box-shadow: 3px 3px 15px 3px #6565656b;">
          <h1>Title</h1>
          <h4>Subtitle</h4>
        </div>
      </timeline-item>
    </timeline>
  `,
})
export class AppComponent {
  more = [];
}

set dots color for each item as HEX code

<timeline>
    <timeline-item color="#42b5b6"> 
        <!--Your Content Goes Here-->
    </timeline-item>
</timeline>

Features

  • Mobile Responsive
  • Customizable colors for each timeline item

Author

Keshav Lingala


Package Sidebar

Install

npm i angular2-timeline

Weekly Downloads

1

Version

0.0.4

License

none

Unpacked Size

49.3 kB

Total Files

19

Last publish

Collaborators

  • keshavlingala