Reading Data from API renders chart read only

[jamesbehrens1]

When I read my data via JSON variable, as shown in all the examples, all works well. When I read the same data in from my API, the gantt chart is rendered read only. I've dumped the data provided to ng-gantt at the dumb component hosting the chart, the JSON.stringify output is exactly the same in both cases. Perhaps the stringify is not telling the whole story.

I'm not sure this is an issue, it may be a stupid user trick. (I mention the state management as some postulated the issue was due to the immutable state, both scenarios use the same state components and calls all the way to the service that calls the API)

Environment: Angular 10, Nx monorepo and state management. Postgres database called via API.

Data Workflow: A resolver kicks off a loadRequestTasks action on the state. The loadRequestTasks action pulls data from the same getAll method in either case using the same effects path. I have been switching back and forth in the service call shown below to test. The data is loaded into the state by the same effect and reducer in either case. A smart component subscribes to the facade and provides the data to the dumb component hosting the ng-gantt chart.

 getAll(requestnbr: number): Observable<ScheduleTask[]> {
    // return this.http.get<ScheduleTask[]>(
    //   `${this.API_PATH}/${requestnbr.toString()}/task`
    // );
    return this.initialData();
  }

editor options

this.editorOptions = {
        vFormat: 'week',
        vEditable: true,
        vUseSort: true,
        vEvents: {
          taskname: this.clickValue.bind(this, this.data),
          res: console.log,
          dur: console.log,
          comp: console.log,
          start: console.log,
          end: console.log,
          planstart: console.log,
          planend: console.log,
          cost: console.log
        },
        vEventsChange: {
          taskname: this.editValue.bind(this, this.data),
          res: this.editValue.bind(this, this.data),
          dur: this.editValue.bind(this, this.data),
          comp: this.editValue.bind(this, this.data),
          start: this.editValue.bind(this, this.data),
          end: this.editValue.bind(this, this.data),
          planstart: this.editValue.bind(this, this.data),
          planend: this.editValue.bind(this, this.data),
          cost: this.editValue.bind(this, this.data)
        }
      };

html

<mat-expansion-panel expanded="true">
  <mat-expansion-panel-header>
    <mat-panel-title>
      Schedule
    </mat-panel-title>
  </mat-expansion-panel-header>
  <form class="flex flex-col">
    <div class="flex flex-col md:flex-row md:flex-wrap md:-mx-2">
      <ng-gantt [options]="editorOptions" [data]="data" #editor></ng-gantt>
    </div>
  </form>
</mat-expansion-panel>

I've cast the dates back and forth, it makes no difference in either case. The JSON in the attached file is what is returned at the dumb component and is precisely the same whether the data is from the JSON variable or the API call.

I'm hoping that I am missing something easy. Thanks in advance.

fromAPI.txt

[jamesbehrens1]

I'm an idiot.. call off the cavalry.

export class SchedulingEditorComponent
  implements OnInit, AfterViewInit {
  @Input()
  data: any;

  @ViewChild('editor') editor: GanttEditorComponent;
  public editorOptions: GanttEditorOptions;

  constructor(public fb: FormBuilder) {}

  ngAfterViewInit() {
    this.editor.setOptions(this.editorOptions);
  }

AfterViewInit solved the issue

[mariohmol]

thanks for sharing the solution!