How to use JQuery.flowchart in Angular 6

[akashdeepshah]

I want to use JQuery.flowchart in angular 6.

I just created a simple code as below.

HTML(app.component.html)

 <div class="container">
  <h1>jQuery flowchart.js Example</h1>
  <div class="demo" id="example" class="example"></div>
  <button class="btn btn-primary" id="create_operator">Create A New Operator</button>
  <button class="btn btn-danger" id="delete_selected_button">Delete Selected Operator</button>
 </div>

and Component(app.component.ts)

import { Component, OnInit, ElementRef } from '@angular/core';
declare var jQuery: any;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  constructor(private el: ElementRef) {
  }

  ngOnInit(): void {

  }

  // tslint:disable-next-line:use-life-cycle-interface
  ngAfterViewInit() {
    const data = {
      operators: {
        operator1: {
          top: 20,
          left: 20,
          properties: {
            title: 'Operator 1',
            inputs: {},
            outputs: {
              output_1: {
                label: 'Output 1',
              }
            }
          }
        },
        operator2: {
          top: 80,
          left: 300,
          properties: {
            title: 'Operator 2',
            inputs: {
              input_1: {
                label: 'Input 1',
              },
              input_2: {
                label: 'Input 2',
              },
            },
            outputs: {}
          }
        },
      }
    };

    $(this.el.nativeElement).find('.example').flowchart({
      data: data
    });

    // Apply the plugin on a standard, empty div...
    // $('#example').flowchart({
    //   data: data
    // });

    let operatorI = 0;
    $('#create_operator').click(() => {
      const operatorId = 'created_operator_' + operatorI;
      const operatorData = {
        top: 60,
        left: 500,
        properties: {
          title: 'Operator ' + (operatorI + 3),
          inputs: {
            input_1: {
              label: 'Input 1',
            }
          },
          outputs: {
            output_1: {
              label: 'Output 1',
            }
          }
        }
      };

      operatorI++;

      $(this.el.nativeElement).find('.example').flowchart('createOperator', operatorId, operatorData);
    });

    $('#delete_selected_button').click(() => {
      $(this.el.nativeElement).find('.example').flowchart('deleteSelected');
    });
  }
}

I installed plugins and package.json has

"jquery": "^3.3.1",
"jquery-ui-dist": "^1.12.1",
"jquery.flowchart": "^1.1.0",

In angular.json

 "scripts": [ 
              "./node_modules/jquery/dist/jquery.min.js",
              "./node_modules/jquery-ui-dist/jquery-ui.js",
              "./node_modules/jquery.flowchart/jquery.flowchart.js" ]
          },

In tsconfig.app.json

"types": [
      "jquery"
    ]

It gives me error that flowchart is

AppComponent_Host.ngfactory.js? [sm]:1 ERROR TypeError: jQuery(...).find(...).flowchart is not a function

Please help me how to use JQuery widget in angular. I tried draggable and it's working fine.

<div class="moving-box">Hellooo moveing</div>
$(this.el.nativeElement).find('.moving-box').draggable({containment: '#draggable-parent'});

[anuj509]

@akashdeepshah @sdrdis any update on this ?

[yektas]

Use it like below Component(app.component.ts): ngAfterViewInit() { setTimeout(() => { your flowchart code... }, 1000); } }