Using svelte-gantt in angular

[redouan-da]

I’m working on a small project of mine where I’m looking to use a time line calendar, I'm trying to use svelte-gantt in my angular project, I didn’t find any example for implement this in angular.

I tried using this example but I got this error : "TS2749: 'SvelteGantt' refers to a value, but is being used as a type here. Did you mean 'typeof SvelteGantt'?"

here is my component.ts

` import {AfterViewInit, Component, ElementRef, ViewChild} from '@angular/core'; import * as moment from 'moment'; import { SvelteGantt } from 'svelte-gantt';

@Component({ selector: 'app-root', template: '<div #ganttElement style="height: 100%; width: 100%;">

[ANovokmet]

Can you try using SvelteGanttComponent as the property interface?

    gantt: SvelteGanttComponent;

[redouan-da]

### when i run the project i still got the same error :

`Error: node_modules/svelte-gantt/types/core/drag/dragDropManager.d.ts:2:26 - error TS2307: Cannot find module 'svelte/store' or its corresponding type declarations.

2 import { Writable } from 'svelte/store';

Error: node_modules/svelte-gantt/types/core/store.d.ts:1:26 - error TS2307: Cannot find module 'svelte/store' or its corresponding type declarations.

1 import { Readable } from 'svelte/store';

Error: src/app/app.component.ts:12:10 - error TS2749: 'SvelteGantt' refers to a value, but is being used as a type here. Did you mean 'typeof SvelteGantt'?

12 gantt: SvelteGantt; `

[ANovokmet]

Hello, sorry I was not able to answer sooner.

Any chance you could push your code to a repo? It would be a great help to me.

[redouan-da]

Hello, thanks for replying, I really do appreciate it 🙏. here is the link of my code : https://github.com/redouan-da/gantt-svelte-angular

[ANovokmet]

Hello, thanks. I've made the changes here https://github.com/redouan-da/gantt-svelte-angular/pull/1 This makes svelte-gantt work in angular but a few issues I need to fix (I used these workarounds in your project):

• svelte-gantt requires some types from 'svelte/store' so installing svelte is necessary but just for the types, resulting in no extra code in your app. Wish I knew how to import these types without doing npm install svelte...
• The default css is lacking, I copied css from https://github.com/ANovokmet/svelte-gantt/blob/master/docs/gantt-default.css

Thanks for doing this and helping me discover these issues. Again sorry for taking so long to respond.

[redouan-da]

Hello, Tank you very much Finally it works, good job, I really appreciate your help. thank you again

[redouan-da]

Hello, it's me again 😁😅 Now every things works great, tasks are showing but I have a problem listening to events, such as onclick or on select or on change a task. I tried to use this : mygantt.api.tasks.on.select((task) => console.log('Listener: task selected', task)); but it didn't work (i guess because myganttis of type SvelteGanttComponent) Also i tried to use onTaskButtonClick : (task) => console.log('clicked on: ', task) but it didn't work

[ANovokmet]

Yeah, it's just a type issue try

this.gantt.api['tasks'].on.select(task => console.log('listener: task selected:', task));

[redouan-da]

Wonderful !! that's worked , thanks 👌

[ghost]

Hi @ANovokmet , can I set to allow Drag and Drop in ONE LINE. Example: I have 3 tasks in line 1, so I just need DnD these tasks in line 1, not allow DnD to another line.

[niczag]

Hi,

Starting with @redouan-da code i've tried to show two different gantt components in the same page :

  gantt1: SvelteGanttComponent;
  @ViewChild('ganttElt1', { read: ElementRef, static: false }) ganttElt1: ElementRef;

  gantt2: SvelteGanttComponent;
  @ViewChild('ganttElt2', { read: ElementRef, static: false }) ganttElt2: ElementRef;

... ... ...

    this.gantt1 = new SvelteGantt({
      // target a DOM element
      target: this.ganttElt1.nativeElement,
     ... ... ...
    });

    this.gantt2 = new SvelteGantt({
      // target a DOM element
      target: this.ganttElt2.nativeElement,
     ... ... ...
    });

<div #ganttElt1></div>
<div #ganttElt2></div>

But the HTML page always show the same gantt twice (gantt2)

Do you have an idea explaining this behavior ?

Thanks

[redouan-da]

@niczag did you find a solution yet ?

[niczag]

Hi @redouan-da , I've not find the solution.

My code seems to be good : 2 distincts objects for 2 distincts DOM elements

I suppose that in svelte-gantt only only one Component is instanciate (Singleton, global variable not cloned for a new instance) ???

[ANovokmet]

Hi @redouan-da , I've not find the solution.

My code seems to be good : 2 distincts objects for 2 distincts DOM elements

I suppose that in svelte-gantt only only one Component is instanciate (Singleton, global variable not cloned for a new instance) ???

Yes, that is true. More precisely, I think the issue is because the stores holding task and row data are singletons. I will work on the fix as soon as I'm able to.

[niczag]

@ANovokmet , thanks for the confirmation. I'll be waiting for the fix.

I also have notice a compliance problem between the RowModel interface in the row.d.ts and the availables parameters :

I've enabled the "strict mode" in my angular environnement and with this option activated i've had errors with the rows data

{ id: 1, label: 'Row #1', height: null } as RowModel

because 'label' is not defined in the RowModel interface and 'height' cannot be null.

So i've modified row.d.ts like this :

export interface RowModel {
    id: number;
    label: string;
    classes?: string | string[];
    contentHtml?: string;
    enableDragging?: boolean;
    height: number | null;
    children?: RowModel[];
}

[hnguyen48206]

Does anyone encounter this error while running in Angular?

Type 'SvelteRow' does not satisfy the constraint 'EntityType'.ts(2344)