Nonsense Placement Mandatory

    @next-level-integration/nli-timeline-lib
    TypeScript icon, indicating that this package has built-in type declarations

    1.2.0 • Public • Published

    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:

    1. 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);

    Keywords

    none

    Install

    npm i @next-level-integration/nli-timeline-lib

    DownloadsWeekly Downloads

    2

    Version

    1.2.0

    License

    MIT

    Unpacked Size

    30.1 kB

    Total Files

    13

    Last publish

    Collaborators

    • sbienert
    • echeah
    • nagendra.donthi
    • kohl077
    • albertarvato
    • mkorsch-nli
    • sdtyn
    • mzimmermann
    • ykh
    • yousof56
    • hashemnik