BALKAN OrgChart JS - JavaScript Org Chart Library | Docs

Angular Templates ​

When using OrgChart JS in Angular with TypeScript, you will often want a custom template, for example cool.

If you write:

typescript
OrgChart.templates.cool = Object.assign({}, OrgChart.templates.ana);

TypeScript may throw an error because cool is not a declared property in the templates type.

Better Approach ​

Use bracket notation:

typescript
OrgChart.templates["cool"] = Object.assign({}, OrgChart.templates["ana"]);

This avoids unnecessary type errors and removes the need for // @ts-ignore.

Short Example ​

typescript
OrgChart.templates["cool"] = Object.assign({}, OrgChart.templates["ana"]);
OrgChart.templates["cool"].size = [310, 190];
OrgChart.templates["cool"].node = `<rect x="0" y="0" width="310" height="190" rx="10" ry="10" fill="#fff" stroke="#eee"></rect>`;
OrgChart.templates["cool"]["name"] = `<text x="110" y="30" fill="#afafaf" style="font-size:18px;">{val}</text>`;

Summary ​

  • Use OrgChart.templates["cool"] in Angular + TypeScript.
  • Avoid // @ts-ignore unless there is no practical alternative.
  • This keeps your code cleaner, safer, and easier to maintain.