Using with Angular 8 about timelines-chart HOT 3 CLOSED

//timelinewrapper.ts

import { Component, OnInit, Input, SimpleChanges } from '@angular/core';
import { ElementRef, Renderer2, AfterViewInit, ViewChild } from '@angular/core';
import * as d3 from 'd3';

import TimelinesChart from 'timelines-chart';

@Component({
  selector: 'app-time-line-wrap',
  templateUrl: './time-line-wrap.component.html',
  styleUrls: ['./time-line-wrap.component.scss']
})
export class TimeLineWrapComponent implements OnInit {
    private elRef: any;
    
    mychart = TimelinesChart();
     inputDataDomain = ['labelval1', 'labelval2', 'labelval3', 'labelval4', 'labelval5'];
    inputDataRange = ['red', 'green', 'grey', 'blue', 'brown'];
    controlwidth: integer = 1000;
   public inputData: any =  //Reference data
        [
            {
                group: "group1",
                data: [
                    {
                        label: "label1",
                        data:
                            [
                                {
                                    timeRange: [1, 2],
                                    val: 'labelval1'
                                },
                                {
                                    timeRange: [2, 3],
                                    val: 'labelval2'
                                },
                                {
                                    timeRange: [6, 7],
                                    val: 'labelval3'
                                },
                                {
                                    timeRange: [7, 8],
                                    val: 'labelval4'
                                },
                                {
                                    timeRange: [11, 12],
                                    val: 'labelval5'
                                },
                                {
                                    timeRange: [12, 13],
                                    val: 'labelval6'
                                }
                            ]
                    },

                ]
            },
			{...}]

			
			 ngOnInit() {
        this.mychart
            .data(this.inputData)
            .zScaleLabel('My Labels')
            .zQualitative(true)
            .xTickFormat(n => +n)
            .timeFormat('%Q')
            .maxLineHeight(20)
            .width(this.controlwidth)
            .topMargin(30)

            //(this.chartspanContainer.nativeElement);

            (this.elRef.nativeElement);

        this.mychart.zColorScale(d3.scaleOrdinal().domain(this.inputDataDomainfromOutside).range(this.inputDataRangefromOutside));
  }
    ngOnChanges(changes: SimpleChanges) {
        console.log("Data simple change event at child chart" + changes)
        this.mychart
            .data(this.inputData);

        console.log(this.inputData);

        this.mychart.zColorScale(d3.scaleOrdinal().domain(this.inputDataDomain).range(this.inputDataRange));
    }