ngx-timeline-vertical - Angular vertical timeline widget
Table of Contents
- What is Angular Timline Vertical?
- Dependencies
- Install
- Example
- FAQ
- Troubleshooting
- How to Contribute
- License
What is Angular Timeline Vertical?
ngx-timeline-vertical is an Angular library that can be imported into any Angular application for quick creation of a vertical timeline. ngx-timeline-vertical is responsive and lightweight. The code can be viewed on github. Created by Alec Kendall.
Dependencies
ngx-timeline-vertical | Angular |
---|---|
current | >=9.x |
Install
Navigate to your project directory:
cd example-app
Install ngx-timeline-vertical
through npm:
npm install --save ngx-timeline-vertical
Example
Create a timeline
Create an Angular application:
ng new example-app
Navigate to the project directory:
cd example-app
Install ngx-timeline-vertical
through npm:
npm install --save ngx-timeline-vertical
Import the NgxTimelineVerticalModule
into your AppModule.ts
:
;;; //Import the NgxTimelineVerticalModule;;
Import the Event
, Point
, Line
, TimelineProperties
, TimelineSegment
types into app.component.ts
:
;
Add the NgxTimelineComponent
selector to app.component.html
:
NgxTimelineComponent
has four Input
properties:
timelineThickness: string;startpoint: Point;endpoint: Point;timelineSegments: TimelineSegment
startpoint
and endpoint
are optional Input
properties.
In app.component.ts
, create the variables to pass to NgxTimelineComponent
's Input
properties.
You can give them a name of your choice. In this example, each variable name mirrors the Input
property it will be binded to.
Your app.component.ts
should now contain:
;;
Create a function to initialize startpoint
and endpoint
:
ngxPointInit: void
Create a function to initialize timelineThickness
:
ngxTimelineThicknessInit: void
Create a function to populate timelineSegments
. Leave it blank for now:
ngxTimelineSegmentsInit: void
The TimelineSegment
constructor takes four fields, in order of appearance:
_timelineProperties: TimelineProperties;_Point: Point;_Event: Event;_Line: Line;
By default these fields are set to:
_timelineProperties: TimelineProperties = new TimelineProperties;_Point: Point = null;_Event: Event = new Event;_Line: Line = null;
Create a default TimelineSegment
in ngxTimelineSegmentsInit()
:
ngxTimelineSegmentsInit: void
Push the created TimelineSegment
onto the timelineSegments
array:
ngxTimelineSegmentsInit: void
Call ngxPointInit()
, ngxTimelineThicknessInit()
, and ngxTimelineSegmentsInit()
from within ngOnInit()
:
ngOnInit
Your app.component.ts
should now contain:
import { Component } from '@angular/core';import { Point, TimelineSegment, Line, Event } from 'ngx-timeline-vertical'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css']})export class AppComponent { title = 'example-app'; endpoint: Point; startpoint: Point; timelineThickness: string; timelineSegments: TimelineSegment[] = []; ngOnInit() { this.ngxPointInit(); this.ngxTimelineThicknessInit(); this.ngxTimelineSegmentsInit(); } ngxPointInit(): void { //The Point constructor takes _size: string, _color: string, _borderRadius: string this.startpoint = new Point('40px', '#B10CC8', '30px'); this.endpoint = new Point('40px', '#B10CC8', '30px'); } ngxTimelineThicknessInit(): void { this.timelineThickness = '20px'; } ngxTimelineSegmentsInit(): void { //The constructor is left empty, creating a default TimelineSegment let timelineSegment: TimelineSegment = new TimelineSegment(); this.timelineSegments.push(timelineSegment); }}
In app.component.html
, bind your app.component.ts
variables to <ngx-timeline></ngx-timline>
Input
properties:
Serve your Angular application:
ng serve
Open a browser and navigate to the link provided by Angular:
You should see:
Add an event
This section builds off of Create a timeline.
The Event
constructor takes four fields, in order of appearance:
_fontColor: string;_fontSize: string;_side: string;_text: string;
By default these values are set to:
_fontColor: string = '#5D21D0'_fontSize: string = '16px', _side: string = 'right'_text: string = ''
Create a function in app.component.ts
named addEvent()
:
addEvent: void
Create a default TimelineSegment
in addEvent()
:
addEvent: void
If an Event
is not passed to the constructor, TimelineSegment
will initialize Event
to a its default values. You can access the Event
of a TimelineSegment
by calling getEvent()
on the corresponding TimlineSegment
. From there, you can change any of the four fields within the Event
by calling the desired field's setter function: setFontColor()
, setFontSize()
, setSide()
, and setText()
.
Change your Event
's text
to the string 'This event was added'
:
addEvent: void
By default, an Event
will be displayed on the right side of a timeline. The Event
's side
field accepts the strings 'left'
or 'right'
.
Change your Event
's side
field to display text
on the left side of the timeline:
addEvent: void
Add a point
This section builds off of Add an event.
The Point
constructor takes three fields, in order of appearance:
_size: string;_color: string;_borderRadius: string;
By default these values are set to:
_size: string = '30px';_color: string = '#39CCCC';_borderRadius: string = '30px';
If a Point
is not passed to the constructor, TimelineSegment
will set it to null
. You can set the Point
of a TimelineSegment
by calling setPoint()
and passing as an argument to setPoint()
a Point
. You can then access the Point
by calling getPoint()
on TimelineSegment
. From there, you can change any of the three fields within Point
by calling the desired field's setter function: setSize()
, setColor()
, and setBorderRadius()
.
Create a Point
in the function addEvent()
. Set size
to '20px'
, color
to 'red'
, and borderRadius
to '30px'
:
addEvent: void
Add the Point
to timelineSegment
:
addEvent: void
Add a line
This section builds off of Add a point.
The Line
constructor takes three fields, in order of appearance:
_style: string;_color: string;_thickness: string;
By default these values are set to:
_style: string = 'solid';_color: string = '#39CCCC';_thickness: string = '2px';
If a Line
is not passed to the constructor, TimelineSegment
will set it to null
. You can set the Line
of a TimelineSegment
by calling setLine()
and passing as an argument to setLine()
a Line
. You can then access the Line
by calling getLine()
on TimelineSegment
. From there, you can change any of the three fields within Line
by calling the desired field's setter function: setStyle()
, setColor()
, and setThickness()
.
Create a default Line
in function addEvent()
:
addEvent: void
Change the Line
style
to 'dashed'
:
addEvent: void
Add the Line
to timelineSegment
:
addEvent: void
Your app.component.ts
should now look like:
;;
Wrapping up
Within addEvent()
, push timelineSegment
to timelineSegments
:
addEvent: void
Add a button to app.component.html
and bind it's (click)
listener to addEvent()
:
Click Me!
Your app.component.ts
, without comments, should now look like this:
;;
Run your application:
ng serve
Open a browser and navigate to the link provided by Angular:
Click the button and you should now see:
FAQs
-
Can I change the timeline thickness?
- Yes. The timeline thickness is an
Input
property of theNgxTimelineComponent
. It can be changed by passing a value to[timelineThickness]
:
<ngx-timeline [timelineThickness]="{{ your_thickness_variable }}"></ngx-timeline>
- Yes. The timeline thickness is an
-
Can I change the font color or size?
- Yes. The font size and color can be changed by calling
setFontSize()
andsetFontColor()
on the correspondingEvent
.
- Yes. The font size and color can be changed by calling
-
Can I change the timeline height?
- Yes. Timeline segments have a minimum height. It can be set by calling
setHeight()
on the correspondingtimelineProperties
.
- Yes. Timeline segments have a minimum height. It can be set by calling
-
Can I change the timeline color?
- Yes. The timeline color can be changed by calling
setColor()
on the correspondingtimelineProperties
.
- Yes. The timeline color can be changed by calling
-
Can I make the timeline horizontal?
- Not currently.
Troubleshooting
How to Contribute
Contributions are not currently being accepted (but will be). If you enjoy the library, check out my site and follow along with my other projects. You can also contact me on my contact page if you have any recommendations or just want to chat. This is the first Angular library I've ever made so please do not hesitate to reach out to me with any suggestions you have!
License
Licensed under the MIT license.