Angular

This document shows you haw you can create an FlowChart JS Angular project.

1. Create a new project:

                 Copy
   ng new flowchart
                   

2. Go to the project root folder:

                 Copy
   cd flowchart
                   

3. Install FlowChart JS
   
   • Download and extract the package.
   • Create a folder balkanapp in \src and copy the extracted files there.
     
   • Add this at the end of the flowchart.d.ts file:

                                                                              Copy
     export default FlowChart
     

   • Add the flowchart.js file in the scripts arrays in your angular.json file:

                                                Copy
     "src/balkanapp/flowchart.js"
     

   • In your app.component.ts add this reference:

                                                Copy
     import FlowChart from "../balkanapp/flowchart";
     

   
   
4. In the app.component.html file add or replase the content with this:

                        Copy
   <style>
       #chart {
           width: 100%;
           height: 700px;
       }
   </style>
   
   <div id="chart"></div>
                   

5. In the export class of app.component.ts add this code:

                                        Copy
   constructor() { }
   
   ngOnInit() {
       if (document.getElementById('chart')) {
           var chart = new FlowChart("#chart", {
           });
   
           chart.load(
               {
                   nodes: [
                       { id: 1, templateId: 'startEnd', x: 400, y: 150, text: "Start"},
                   ]
               }
           );
       }
   }
                   

6. Start the project:

                 Copy
   ng serve