Angular 14 ngx-horizontal-timeline Example to Create Horizontal Timeline Using Text inside Browser Using TypeScript

Welcome folks today in this blog post we will be using the ngx-horizontal-timeline library to create horizontal 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-horizontal-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 NgxHorizontalTimelineModule inside the imports array as shown below

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';
import { NgxHorizontalTimelineModule } from 'ngx-horizontal-timeline';


@NgModule({
  imports:      [ BrowserModule, FormsModule, NgxHorizontalTimelineModule ],
  declarations: [ AppComponent, HelloComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

import { NgModule } from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';

import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';

import { HelloComponent } from './hello.component';

import { NgxHorizontalTimelineModule } from 'ngx-horizontal-timeline';

@NgModule({

imports: [ BrowserModule, FormsModule, NgxHorizontalTimelineModule ],

declarations: [ AppComponent, HelloComponent ],

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

<ngx-htl-horizontal-timeline [(items)]="items"></ngx-htl-horizontal-timeline>

1	<ngx-htl-horizontal-timeline [(items)]="items"></ngx-htl-horizontal-timeline>

As you can see in the above html code we have the ngx-horizontal-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

import { Component } from '@angular/core';
import { TimelineItem } from 'ngx-horizontal-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: 'Test 1',
    icon: 'glyphicon glyphicon-adjust',
    active: true,
    title: 'Example 1',
    color: '16a085',
    command() {
      console.log('Action 1');
    }
  });
  
  this.items.push({
    label: 'Test 2',
    icon: 'fa fa-plus',
    title: 'Example 2',
    color: '2980b9',
    command() {
      console.log('Action 2');
    }
  });
  }

}

import { Component } from '@angular/core';

import { TimelineItem } from 'ngx-horizontal-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: 'Test 1',

icon: 'glyphicon glyphicon-adjust',

active: true,

title: 'Example 1',

color: '16a085',

command() {

console.log('Action 1');

}

});

this.items.push({

label: 'Test 2',

icon: 'fa fa-plus',

title: 'Example 2',

color: '2980b9',

command() {

console.log('Action 2');

}

});

}

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.