NliTimelineLib
The general structure of component:
<nli-timeline [showDatePicker]="" [visibleSteps]="" (onSelect)="">
<nli-timelineitem [model]=""></nli-timelineitem>
<nli-timelineitem [model]=""></nli-timelineitem>
...
</nli-timeline>Setup Steps:
1-at packege.json insert this line for dependency:Notice that this version number is not fixed and will be changed after every mudule bulding.
"dependencies": {
"nli-timeline-lib": "1.2.0",
},
2-for importing material icons and fonts add this line to your main html file for example:index.html :
<head>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://fonts.googleapis.com/css? family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic"
type="text/css" rel="stylesheet">
</head> 3-to import TimeLine component to your project insert this lines to app.module.ts:
import { LibModule as TimelineModule} from 'nli-timeline-lib';
@NgModule({
declarations: [
...
],
imports: [
...
TimelineModule,
...
],
providers: [
...
],
bootstrap: [AppComponent]
});
4- Apply material theme. create app-theme.scss file and apply material theme. You should also add style
dependency in .angular-cli.json file:
"styles": [
...
"app-theme.scss"
],
Do not forget to include timeline theme.
The sample app-theme.scss exists at the end of this file.
5-Execute npm install to install nli-time-line module;
Usage example:
in .ts file you can write this code for creating timeline model:
import { TimeLineStepModel } from 'nli-timeline-lib/lib/timeline/timelineitem/timelineitem-model';
import { TimeLineModel } from 'nli-timeline-lib/lib/timeline/timeline-model';
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'))
]);in .html file:
<div style="width:100%;">
<nli-timeline [showDatePicker]="true" [visibleSteps]="14" > <nli-timelineitem
*ngFor="let timeLineStepModel of timelineModel.steps let i=index "
[model]="timeLineStepModel">
</nli-timelineitem> </nli-timeline>
</div>Appendix:
- Sample app-theme.scss
@import '~@angular/material/theming';
// Plus imports for other components in your app.
// Include the base styles for Angular Material core. We include this here so that you only
// have to load a single css file for Angular Material in your app.
@include mat-core();
// Define the palettes for your theme using the Material Design palettes available in palette.scss
// (imported above). For each palette, you can optionally specify a default, lighter, and darker
// hue.
$app-primary: mat-palette($mat-blue);
$app-secondary: mat-palette($mat-blue);
$app-accent: mat-palette($mat-orange, A200, A100, A400);
// The warn palette is optional (defaults to red).
$app-warn: mat-palette($mat-red);
// Create the theme object (a Sass map containing all of the palettes).
$app-theme: mat-light-theme($app-primary, $app-accent, $app-warn);
// Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component
// that you are using.
@include angular-material-theme($app-theme);
@import '~nli-timeline-lib/lib/timeline/timeline.component.scss';
@include nli-material-theme($app-theme);