Welcome folks today in this blog post we will be using the ngx-vertical-timeline
library to create vertical timeline
using text
using typescript in browser. All the full source code of the application is shown below.
Get Started
In order to get started you need to make a new angular
project using the below command as shown below
ng new sampleproject
cd sampleproject
And after that you need to install the below libraries
using the below command as shown below
npm i ngx-vertical-timeline
And after that you will see the below directory
structure of the angular app as shown below
Now you need to go to app.module.ts
file and include the NgxVerticalTimelineModule
inside the imports array as shown below
app.module.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { NgxVerticalTimelineModule } from 'ngx-vertical-timeline'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, NgxVerticalTimelineModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule{} |
And now we need to go to app.component.html
file and copy paste the following code
app.component.html
1 |
<lib-ngx-vertical-timeline [(items)]="items"></lib-ngx-vertical-timeline> |
As you can see in the above html
code we have the ngx-vertical-timeline
directive where we have assigning the items
that we will be writing inside the typescript code.
And now we need to go to app.component.ts
file and copy paste the below code
app.component.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 |
import { Component } from '@angular/core'; import { TimelineItem } from 'ngx-vertical-timeline'; @Component({ selector: 'my-app', templateUrl: './app.component.html', styleUrls: [ './app.component.css' ] }) export class AppComponent { items: TimelineItem[] = []; externalVariable = 'hello'; ngOnInit() { const self = this; this.items.push({ label: 'Action', icon: 'fa fa-calendar-plus-o', styleClass: 'teste', content: `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.`, title: '18 de June, 2019, 10:12', command() { alert(`test: ${self.externalVariable}`); } }); this.items.push({ label: 'Action', icon: 'fa fa-plus', styleClass: 'teste', content: `Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.`, title: '11 de November, 2019, 12:00', command() { alert('Action!'); } }); this.items.push({ label: 'Action', icon: 'fa fa-user-circle-o', styleClass: 'teste', content: `Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.`, title: '01 de December, 2019, 10:12', command() { alert('Action!'); } }); this.items.push({ label: 'Action', icon: 'fa fa-handshake-o', styleClass: 'teste', content: `Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.`, title: '27 de January, 2020, 10:35', command() { alert('Action!'); } }); } } |
As you can see in the above typescript
code we are assigning the items
which contain the array
of json objects where we have the information about each timeline
which contains the icon,content and title which contains the date
of the timeline.