collapsible-timeline v1.0.0

Collapsible Timeline Component for Angular

This project was generated with Angular CLI version 8.3.19.

Getting Started

npm install --save collapsible-timeline

Demo

Live Demo

Configuration

Angular cli

After installation, no additional configuration is needed. Import the CollapsibleTimelineModule and define it as one of the imports of your application module:

import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {CollapsibleTimelineModule} from "collapsible-timeline";
 
import {AppComponent} from './app.component';
 
@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        CollapsibleTimelineModule
    ],
    bootstrap: [
        AppComponent
    ]
})
export class AppModule {}

Examples

Basic

<collapsible-timeline [(data)]="items" (change)="consoles($event)">
	<collapsible-timeline-column styleClass="col-md-5">
		<ng-template let-col let-data="rowData" collapsibleTimelineTemplate="header">
			<span>{{data.title}}</span>
		</ng-template>
	</collapsible-timeline-column>
  <collapsible-timeline-column>
		<ng-template let-col let-data="rowData" collapsibleTimelineTemplate="header">
			<span>{{data.title2}}</span>
		</ng-template>
	</collapsible-timeline-column>
	<collapsible-timeline-body >
		<ng-template let-body let-data="rowData" collapsibleTimelineTemplate="body">
      		<p style="padding: 10px">{{data.text}}</p>
		</ng-template>
	</collapsible-timeline-body>
</collapsible-timeline>

Input properties

Events

Keywords

• angular
• angular8
• angular 8
• angular timeline
• timeline
• timeline
• ng