@next-level-integration/timeline NPM

@next-level-integration/timeline

Install:

npm install @next-level-integration/timeline

Importing:

import { NliTimelineModule } from '@next-level-integration/timeline';

Add this to the styles:

.nli-primary {
color: mat-color($primary-color) !important;
}
.nli-accent {
color: mat-color($accent-color) !important;
}
.nli-warn {
color: mat-color($warn-color) !important;
}
.nli-primary-bg {
background-color: mat-color($primary-color) !important;
}
.nli-accent-bg {
background-color: mat-color($accent-color) !important;
}
.nli-warn-bg {
background-color: mat-color($warn-color) !important;
}
.nli-primary-border {
border-color: mat-color($primary-color) !important;
border-top-color: mat-color($primary-color) !important;
border-bottom-color: mat-color($primary-color) !important;
border-left-color: mat-color($primary-color) !important;
border-right-color: mat-color($primary-color) !important;
}
.nli-accent-border {
border-color: mat-color($accent-color) !important;
border-top-color: mat-color($accent-color) !important;
border-bottom-color: mat-color($accent-color) !important;
border-left-color: mat-color($accent-color) !important;
border-right-color: mat-color($accent-color) !important;
}
.nli-warn-border {
border-color: mat-color($warn-color) !important;
border-top-color: mat-color($warn-color) !important;
border-bottom-color: mat-color($warn-color) !important;
border-left-color: mat-color($warn-color) !important;
border-right-color: mat-color($warn-color) !important;
}

Usage

HTML

<div class="timeline-container">
    <nli-timeline [showDatePicker]="true" [visibleSteps]="14">
        <nli-timelineitem
            *ngFor="let timeLineStepModel of timelineModel.steps let i=index "
            [model]="timeLineStepModel">
        </nli-timelineitem>
    </nli-timeline>
</div>

TS

timelineModel: TimeLineModel = new TimeLineModel(5, [
new TimeLineStepModel('17','Zählerwechsel17', new Date('2014-04-03')),
new TimeLineStepModel('18','Zählerwechsel18', new Date('2015-04-03')),
new TimeLineStepModel('1','Zählerwechsel1', new Date('2016-04-03')),
new TimeLineStepModel('2','Zählerwechsel2', new Date('2017-04-03')),
new TimeLineStepModel('3','Zählerwechsel3', new Date('2018-04-03')),
new TimeLineStepModel('4','Zählerwechsel4', new Date('2019-04-03')),
new TimeLineStepModel('5','Zählerwechsel5', new Date('2020-04-03')),
new TimeLineStepModel('6','Zählerwechsel6', new Date('2013-04-03')),
new TimeLineStepModel('7','Zählerwechsel7', new Date('2012-04-03')),
new TimeLineStepModel('8','Zählerwechsel8', new Date('2011-04-03')),
new TimeLineStepModel('9','Zählerwechsel9', new Date('2010-04-03')),
new TimeLineStepModel('10','Zählerwechsel10', new Date('2009-04-03')),
new TimeLineStepModel('11','Zählerwechsel11', new Date('2008-04-03')),
new TimeLineStepModel('12','Zählerwechsel12', new Date('2007-04-03')),
new TimeLineStepModel('13','Zählerwechsel13', new Date('2006-04-03')),
new TimeLineStepModel('14','Zählerwechsel14', new Date('2003-04-03')),
new TimeLineStepModel('15','Zählerwechsel15', new Date('2002-04-03')),
new TimeLineStepModel('16','Zählerwechsel16', new Date('2000-11-11'))
]);