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.
