TimeLine HTML Template working?

[plaetzchen79]

I am trying to use the template option to make a timeline-item render with html Tags. (like shown in the soccer cup overview)

I am getting no errors, but the timeline ignores the "template" attribute and the function (the other attributes are working).

What am i doing wrong?

Thank you

    this.visOptions = {showCurrentTime: true,  showMajorLabels: true, showMinorLabels: true,
      template:() => (function (item, element, data) {
                 return  "<p>"+ item.data.Name + "</p><p style='font-size:x-small;'>" + item.data.Betreff + "</p> <hr><p style='font-size:x-small;'><img src='/img/user.png'/>" + item.data.Bearbeiter.length + " </p>"  ;
                })
    };

         this.visTimelineService.setOptions(this.visTimeline,this.visOptions);
         

[seveves]

I don't think that this is an issue with ng2-vis. Please try the following: template: (item, element, data) => { return ... } or without the fat arrow: template: function (item, element, data) { return ... } (where ... is your string content of course).

[plaetzchen79]

Thank you for your answer! unfortunately i am getting the error

Types of property 'template' are incompatible. Type '(item: any, element: any, data: any) => string' is not assignable to type '() => void'.

and can't compile

[seveves]

That's an error in here. I will make a PR to fix this. You could try to overwrite the typescript definition or set your visOptions object to any as a workaround.

[plaetzchen79]

Ok Thank you! And of course thank you for creating and maintaining the whole project!

[plaetzchen79]

I have changed the type of the "visOptions" object to any. Does compile then.

But vis.js still does not care about the template-option. My breakpoint inside {return .. } does not fire too.

this.visOptions = {showCurrentTime: true, showMajorLabels: true, showMinorLabels: true, rollingMode: true, template: function (item, element, data){ return "..." } }; this.visTimelineService.setOptions(this.visTimeline,this.visOptions);

[seveves]

May you provide some code as an example to reproduce this issue?

[plaetzchen79]

I have a timeline-Component ts:

import { Component, OnInit, Input, OnDestroy } from '@angular/core';
import { VisTimelineService } from "ng2-vis/components";
import { VisTimelineItems, VisTimelineOptions } from "ng2-vis/ng2-vis";

@Component({
  selector: 'timeline-component',
  templateUrl: './timeline-component.component.html',
  styleUrls: ['css/timeline-component.component.css']
})
export class TimelineComponentComponent implements OnInit, OnDestroy {

 @Input() timelineitems: VisTimelineItems;

 public visTimeline: string = 'timelineId1';
 public visOptions: any;

constructor(private visTimelineService: VisTimelineService) { }

  ngOnInit():void {
  }

   public timelineInitialized(): void {
        console.log('timeline initialized');

        this.visOptions = {showCurrentTime: true,  showMajorLabels: true, showMinorLabels: true, rollingMode: true,
          template: function (item, element, data){
                        return  "<p>"+ item.data.Betreff + "</p><p style='font-size:x-small;'> ff" + item.data.Betreff + "</p>";
                    }
        }; //just playing here

        this.visTimelineService.setOptions(this.visTimeline,this.visOptions);
       
 
        // open your console/dev tools to see the click params
        this.visTimelineService.click
            .subscribe((eventData: any[]) => {
                if (eventData[0] === this.visTimeline) {
                    console.log(eventData[1]);
                }
            });
    }

      public ngOnDestroy(): void {
        this.visTimelineService.off(this.visTimeline, 'click');
    }

}

html template:

 <div [visTimeline]="visTimeline"
           [visTimelineItems]="timelineitems"
           (initialized)="timelineInitialized()"></div>

using component like this: <timeline-component [timelineitems]="timelineitems" >``

Thank you

[seveves]

I'll give it a try this week and come back to you. Thanks so far.

[plaetzchen79]

Hi, any news concerning this issue? Thank you