Unable to use in Angular 14

[krishnaraghavendra]

Hi i am trying to make it work with angular 14 but the displayed page is empty. Can some one help

<div id="drawflow" >
</div>

import { CommonModule } from '@angular/common';
import { Component, OnInit } from '@angular/core';
import Drawflow from 'drawflow';

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.scss'],
  standalone: true,
  imports: [CommonModule]
})
export class TestComponent implements OnInit {
  editor:Drawflow|null= null;

  constructor() { }

  ngOnInit(): void {
    let element = <HTMLElement> document.getElementById('drawflow');
    console.log(element);
    this.editor = new Drawflow(element);
    this.editor.reroute = true;
    this.editor.curvature = 0.5;
    this.editor.reroute_fix_curvature = true;
    this.editor.reroute_curvature = 0.5;
    this.editor.force_first_input = false;
    this.editor.line_path = 1;
    this.editor.editor_mode = 'edit';

    this.editor.start();
  }

}

<app-test></app-test>

[jerosoler]

View: https://github.com/jerosoler/Drawflow/labels/Angular

[zulander1]

It's a CSS issue. You need set the html,body hight at 100%, I've used it with angular 17 and it working fine