Why Use `OrgChart.templates["cool"]` in Angular (TypeScript)

When working with OrgChart JS in Angular using TypeScript, you might want to create a custom node template like this:

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

However, this line will often trigger a TypeScript error:

❌ Property 'cool' does not exist on type '{ ana: Template; ... }'

This happens because TypeScript enforces strict typing. It expects you to only use property names that are declared in the type. Since cool is not part of the original templates type, TypeScript flags it as an error.

You could suppress the error using // @ts-ignore, but that disables type checking and isn't ideal.

✅ The Better Approach

Use bracket notation instead:

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

This avoids TypeScript errors because bracket notation supports dynamic or undeclared keys, especially when OrgChart.templates is typed with an index signature like { [key: string]: any }.

📦 Example: Defining a Custom Template in Angular

Below is a full example of how you can define a custom cool template safely using bracket notation:

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

OrgChart.templates["cool"].defs = `
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="cool-shadow">
    <feOffset dx="0" dy="4" in="SourceAlpha" result="shadowOffsetOuter1" />
    <feGaussianBlur stdDeviation="10" in="shadowOffsetOuter1" result="shadowBlurOuter1" />
    <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.1 0" in="shadowBlurOuter1" type="matrix" result="shadowMatrixOuter1" />
    <feMerge>
        <feMergeNode in="shadowMatrixOuter1" />
        <feMergeNode in="SourceGraphic" />
    </feMerge>
</filter>`;

OrgChart.templates["cool"].size = [310, 190];

OrgChart.templates["cool"].node = `
<rect filter="url(#cool-shadow)" x="0" y="0" height="190" width="310" fill="#ffffff" stroke-width="1" stroke="#eeeeee" rx="10" ry="10"></rect>
<rect fill="#ffffff" x="100" y="10" width="200" height="100" rx="10" ry="10" filter="url(#cool-shadow)"></rect>
<rect stroke="#eeeeee" stroke-width="1" x="10" y="120" width="220" fill="#ffffff" rx="10" ry="10" height="60"></rect>
<rect stroke="#eeeeee" stroke-width="1" x="240" y="120" width="60" fill="#ffffff" rx="10" ry="10" height="60"></rect>
<text style="font-size: 11px;" fill="#afafaf" x="110" y="60">PERFORMANCE</text>
<image xlink:href="https://cdn.balkan.app/shared/speedometer.svg" x="110" y="65" width="32" height="32"></image>`;

OrgChart.templates["cool"].img_0 = `
<clipPath id="{randId}">
    <rect fill="#ffffff" stroke="#039BE5" stroke-width="5" x="10" y="10" rx="10" ry="10" width="80" height="100"></rect>
</clipPath>
<image preserveAspectRatio="xMidYMid slice" clip-path="url(#{randId})" xlink:href="{val}" x="10" y="10" width="80" height="100"></image>
<rect fill="none" stroke="#F57C00" stroke-width="2" x="10" y="10" rx="10" ry="10" width="80" height="100"></rect>`;

OrgChart.templates["cool"]["name"] = `<text style="font-size: 18px;" fill="#afafaf" x="110" y="30">{val}</text>`;
OrgChart.templates["cool"]["title"] = `<text style="font-size: 14px;" fill="#F57C00" x="20" y="145">{val}</text>`;
OrgChart.templates["cool"]["title2"] = `<text style="font-size: 14px;" fill="#afafaf" x="20" y="165">{val}</text>`;
OrgChart.templates["cool"]["points"] = `<text style="font-size: 24px;" fill="#F57C00" x="270" y="165" text-anchor="middle">{val}</text>`;
OrgChart.templates["cool"]["performance"] = `<text style="font-size: 24px;" fill="#F57C00" x="150" y="90">{val}</text>`;

OrgChart.templates["cool"].svg = `
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="background-color:#F2F2F2;display:block;" width="{w}" height="{h}" viewBox="{viewBox}">{content}</svg>`;

OrgChart.templates["cool"].nodeMenuButton = `
<g style="cursor:pointer;" transform="matrix(1,0,0,1,270,20)" data-ctrl-n-menu-id="{id}">
    <rect x="-4" y="-10" fill="#000000" fill-opacity="0" width="22" height="22"></rect>
    <circle cx="0" cy="0" r="2" fill="#F57C00"></circle>
    <circle cx="7" cy="0" r="2" fill="#F57C00"></circle>
    <circle cx="14" cy="0" r="2" fill="#F57C00"></circle>
</g>`;

🧠 Final Thoughts

• ✅ Use OrgChart.templates["cool"] for compatibility with TypeScript.

• ❌ Avoid // @ts-ignore unless absolutely necessary.

• 🎯 This keeps your Angular project clean, type-safe, and easy to maintain.