"Integrating Orgchart with Typescript in Angular4: A Step-by-Step

mxResources.loadDefaultBundle = false;
 var bundle = mxResources.getDefaultBundle(RESOURCE_BASE, mxLanguage) ||
                mxResources.getSpecialBundle(RESOURCE_BASE, mxLanguage);

            // Ensures synchronous requests are handled properly
            mxUtils.getAll([bundle, STYLE_PATH + '/default.xml'], function(xhr)
            {
                // Incorporates bundle text into resources
                mxResources.parse(xhr[0].getText());

            // Sets up the default graph theme
            var themes = new Object();
            themes[Graph.prototype.defaultThemeName] = xhr[1].getDocumentElement(); 

            // Main
            new EditorUi(new Editor(urlParams['chrome'] == '0', themes));
        }, function()
        {
            document.body.innerHTML = '<center style="margin-top:10%;">Error loading resource files. Please check browser console.</center>';
        });
    })();`

I am undertaking the implementation of an Orgchart in Angular 4 using TypeScript and HTML. I have explored mxgraph and drawio without success. Any assistance would be greatly appreciated.

angulartypescriptorgchart

Answer №1

@Aarthi, in my opinion, the key is understanding how to create recursive components with Angular 2+. The code snippet below is taken from the template file of a nested organization chart node component. If you want more information, check out this demo - https://stackblitz.com/edit/ng-orgchart

<div class="oc-node" [class.oc-is-selected]="isSelected" (click)="onClickNode($event)">
    <ng-container
        *ngTemplateOutlet="nodeTemplate ? nodeTemplate : defaultNodeTemplate; context:{ datasource:datasource,nodeHeading: nodeHeading, nodeContent: nodeContent }">
    </ng-container>
    <i *ngIf="datasource.children" [ngClass]="{'oc-icon-plus': isCollapsed, 'oc-icon-minus': !isCollapsed}" (click)="toggleChildren()" class="oc-toggle-btn oc-icon"></i>
</div>
<div *ngIf="datasource.children" [@expandCollapse]="isCollapsed ? 'collapsed' : 'expanded'"
    (@expandCollapse.start)="toggleAnimStart($event)" (@expandCollapse.done)="toggleAnimEnd($event)"
    [ngStyle]="ecStyles" class="oc-groups">
    <ng-container *ngFor="let node of datasource.children;let i=index">
        <div *ngIf="i % groupScale === 0" class="oc-group">
            <ng-container *ngFor="let temp of Arr(groupScale);let j=index;">
                <orgchart-node *ngIf="i + j < datasource.children.length" [datasource]="datasource.children[i + j]"
                    [nodeHeading]="nodeHeading" [nodeContent]="nodeContent" [nodeTemplate]="nodeTemplate"
                    [groupScale]="groupScale" [select]="select" (nodeClick)="onNodeClick($event)">
                </orgchart-node>
            </ng-container>
        </div>
    </ng-container>
</div>

<ng-template #defaultNodeTemplate let-nodeData="datasource" let-heading="nodeHeading" let-content="nodeContent">
    <div class="oc-node-heading">{{nodeData[heading]}}</div>
    <div class="oc-node-content">{{nodeData[content]}}</div>
</ng-template>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Can you provide any instances of Angular2 projects with intricate routing, specifically with version 2.0.0-rc.1?

Currently, I am in the process of building a web application with angular2 (2.0.0 rc 1) and encountering obstacles due to the insufficient documentation, especially when it comes to establishing intricate routing. Since version 2.0.0 was just released app ...

angularjsangularangular-routing

Encountering error while running npm ci: 'Error reading property '@angular/animations' as undefined'

During the docker build process of my Angular project, I encountered an error while running the npm ci command: Cannot read property '@angular/animations' of undefined Despite the lack of a clear explanation in the error message, we have been st ...

node.jsangularnpm

Unique loading animations are assigned to each individual page within the Next.js framework

Is there a way to have unique loading animations for each of my website pages during the loading process? How can I achieve this? I've attempted to put the loading component on the page component directly, but it doesn't seem to work: //Page com ...

javascriptreactjstypescriptnext.jsloading

What is the best way to link assets within an Angular custom element (Web Components)?

After successfully creating a web component and referencing an image from my asset folder, everything was running smoothly on my local environment. However, when I published my custom element to Firebase hosting, I encountered some issues. When trying to ...

javascriptangularweb-componentcustom-element

Is it possible to use a component created in the newest version of Angular in apps developed with older versions of Angular?

I am interested in developing a component using the most recent version of Angular. However, my intention is to use this component in two distinct Angular applications - one created with Angular 6 and another with Angular 10. Is it feasible to achieve this ...

javascriptangular

What are some tips for integrating AppInsights with Angular?

Trying to integrate AppInsights with Angular has been a bit challenging for me: import { AppInsights } from 'applicationinsights-js'; .... if (!AppInsights.config) { var config: Microsoft.ApplicationInsights.IConfig = { instrumenta ...

angularazureazure-application-insightsappinsights

Struggling with declaring generic types in TypeScript can be a challenge

Struggling with declaring the type while creating a hook named useUpdate, here's the code: type CallBack<T extends readonly any[]> = ( ...args: T ) => void | (() => void | undefined); function useUpdate<T extends readonly any[]>( ...

reactjstypescriptreact-hooks

Having trouble initiating a new Angular project

I recently started using Angular and encountered an issue while attempting to create a new project. I have successfully installed nodejs and npm as required for Angular development. Additionally, I have installed the Angular CLI tool but encountering an er ...

node.jsangularnpm

Discovering the best method to retrieve user details (email address) following a successful login across all pages or components within Angular

Discovering the world of Angular and TypeScript is quite exciting. In my Angular project, I have 8 pages that include a login and registration page. I'm facing an issue where I need to access the user's email data on every page/component but the ...

angulartypescript

Firebase is storing object values as 'undefined'

My goal is to retrieve user details from my firebase database while using Ionic and Typescript. Here is how I add a user: addToDatabase(user: User) { let isInstructor = user.isInstructor == null ? false : user.isInstructor; this.afDB.list("/users/").push ...

typescriptfirebaseionic-frameworkfirebase-realtime-database

In Angular, the object may be null

click here for image Encountering an error message stating that Object is possibly 'null' when utilizing querySelector and addEventListener in Angular. ...

angularjstypescript

Sorry, it seems like there is an issue with the Typescript error that states: "The expression you are trying to call is not valid. The type 'typeof import("koa-session")

Partially resolved: An issue has been identified on Github regarding this problem. It seems that declaring a module in a global scope rewrites the types of the entire exported module, while declaring a module within another module merges the types. This b ...

node.jstypescript

Downloading fonts from Google Fonts is always a struggle when using Next.js

After initializing a fresh Next.js project using create-next-app, I managed to successfully launch it with npm run dev. However, an issue arises every time Next.js boots up, displaying the following error: FetchError: request to https://fonts.gstatic.com/ ...

javascripttypescriptnext.jsgoogle-fonts

Array updating using the foreach method in Angular

Hey everyone, I've encountered an error that seems to be related to scope and I could use some advice. I'm currently looping through an array and trying to push the results to another array. However, when I attempt to push the results to public m ...

javascriptangulartypescript

Leveraging MatSort from Angular Material

In my customer.component.ts file, I have the following code: import { Component, OnInit, ViewChild, AfterViewInit } from '@angular/core'; import { NorthwindService } from 'swagger'; import {LiveAnnouncer} from '@angular/cdk/a11y&ap ...

angularangular-materialmaterial-designangular8

Troubleshooting issue with jest expect.any() failing to work with a custom class following migration from JavaScript to TypeScript

I recently made the switch to TypeScript in my project, and now some of my Jest tests are failing. It appears that the next function below is no longer being called with an AppError object, but with an Error object instead. Previously, the assertion expec ...

javascriptnode.jstypescriptexpressjestjs

Input value not being displayed in one-way binding

I have a challenge in binding the input value (within a foreach loop) in the HTML section of my component to a function: <input [ngModel]="getStepParameterValue(parameter, testCaseStep)" required /> ... // Retrieving the previously saved v ...

angulartypescriptinputbinding

Creating a global user object accessible to all Angular2 components

Hey there! I've successfully shared the Parent container's property with an attribute directive and inputs, but it's not working when the child component is brought in using <router-outlet>. Any suggestions on how to share it with ever ...

dependency-injectionangularangular2-routingangular2-directives

Leveraging Angular 2 and Typescript for crafting a cutting-edge Chrome application

I am currently working on developing a Chrome App using the Angular 2 5-minute quick start as a reference to create a sample application. However, I have encountered security concerns related to how system JS functions with Chrome applications. Has anyone ...

google-chromeangular

A beginner's guide to integrating ChartJS with React

Trying to incorporate ChartJS into a React component but unsure of how to proceed. First step is to create a canvas element following the instructions found at https://www.chartjs.org/docs/latest/getting-started/usage.html#creating-a-chart. Next, need to ...

javascriptreactjstypescript