Notes:
- rxjs (ReactiveXJS) concepts used extensively: https://rxjs-dev.firebaseapp.com/guide/overview
Features:
- shows vertical timeline for given simple data array
- shows vertical timeline with complex data array and shows in 'ng-template' with customized style.
Passing Data:
- passes an array in 'options'.
- For the color of the node on the timeline, The item.type accepts 3 values: 'success','info' or 'error'.
- It shows green, blue or red. please check CIRCLE_TYPE for details.
-
import AaclTimelineModule in your Parent module,
//parent component's module @NgModule({ // ... imports: [ // ... AaclTimelineModule // ], // ... }) export class ... { }
-
add <aacl-timeline> in your template
<aacl-timeline [options]="timelineOptions"></aacl-timeline>
-
initialize aacl-timeline options in your parent component's .ts file;
this.timelineOptions = { //... config options here } as AaclTimelineOptions;
detailed configuration details can be found in aacl-timeline.options.ts, and see aacl-timeline-page for an example
- Alan Yang (ayang@sscinc.com)
- Ella Ma (ema@sscinc.com)