npm install angular13-organization-chart --save

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { OrgChartModule } from 'angular13-organization-chart';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    OrgChartModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

export interface TreeNode {
    // Node
    children: TreeNode[];
    hideChildren?: boolean;
    onClick?: () => void;
    // CSS (used for custom styling of individual nodes)
    cssClass?: string;
    css?: string;
}

// make your own interface that extends TreeNode
interface MyTreeNode extends TreeNode {
    name: string;
    description?: string;
    image?: string;
    children: MyTreeNode[];
}

tree: MyTreeNode = {
    name: 'Felines',
    description: 'Cute playful animals',
    image: 'assets/chart-images/1.png',
    onClick: () => alert('Death to dogs'),
    children: [
      {
        name: 'Big Cats',
        image: 'assets/chart-images/3.jpg',
        css: 'background-color: #F00000',
        children: [
          {
            name: 'Lion',
            image: 'assets/chart-images/6.png',
            children: []
          },
          {
            name: 'Tiger',
            cssClass: 'yellow-on-hover',
            image: 'assets/chart-images/4.jpg',
            children: []
          },
          {
            name: 'Cheetah',
            image: 'assets/chart-images/8.png',
            children: []
          }
        ]
      },
      {
        name: 'Small Cats',
        description: 'Cute, but can also be crude. Like when they defecate on your lap, that would be a good example of crudeness on their part',
        image: 'assets/chart-images/9.png',
        children: [
          {
            name: 'House Cat',
            image: 'assets/chart-images/7.png',
            children: []
          },
          {
            name: 'Street Cat',
            image: 'assets/chart-images/8.png',
            children: [
              {
                name: 'Dumb Cat',
                image: 'assets/chart-images/13.png',
                children: [
                  {
                    name: 'Sorry For Bad Example',
                    image: 'assets/chart-images/6.png',
                    children: []
                  }
                ],
              },
              {
                name: 'Good Cat',
                image: 'assets/chart-images/8.png',
                children: [
                  {
                    name: 'Binary Search Tree',
                    image: 'assets/chart-images/10.png',
                    children: [
                      {
                        name: '7',
                        image: 'assets/chart-images/11.png',
                        children: [
                          {
                            name: '3',
                            image: 'assets/chart-images/6.png',
                            children: [
                              {
                                name: '2',
                                image: 'assets/chart-images/7.png',
                                children: []
                              },
                              {
                                name: '5',
                                image: 'assets/chart-images/12.png',
                                children: []
                              }
                            ]
                          },
                          {
                            name: '13',
                            description: 'An odd yet funny number.',
                            image: 'assets/chart-images/14.png',
                            children: [
                              {
                                name: '11',
                                description: 'All nodes to the right are greater',
                                image: 'assets/chart-images/15.png',
                                children: []
                              },
                              {
                                name: '17',
                                image: 'assets/chart-images/13.png',
                                description: 'This number is less that 17.00000001',
                                children: []
                              }
                            ]
                          }
                        ]
                      }
                    ]
                  }
                ]
              }
            ]
          }
        ]
      },
      {
        name: 'Fake Cats',
        image: 'assets/chart-images/5.png',
        children: [],
        onClick: () => console.log('Google chrome stole some RAM')
      }
    ]
  };

<angular-org-chart [nodeTemplate]="nodeTemplate" [data]="tree" #exampleChart="orgChart">

    <!-- OPTIONAL: zoom button with an ugly png -->
    <button zoom-button class="zoom-button" (click)="exampleChart.toggleZoom()">
        <img src="assets/zoom-in-out.png" width="100%" alt="ZoomInOut">
    </button>

</angular-org-chart>

<!-- Node Template -->
<ng-template #nodeTemplate let-node>
    <div class="chart-node">
        <img [src]="node?.image">
        <div class="name">{{node?.name}}</div>
        <div class="description">{{node?.description}} </div>
        <!-- An ugly button to fold/unfold -->
        <div *ngIf="node.children.length" (click)="node.hideChildren = !node.hideChildren" class="tree-fold-btn">{{node.hideChildren ? '+' : '-'}}</div>
    </div>
</ng-template>

:host {
    display: block;
    text-align: center;
    padding: 64px;
}

// ugly css for quick test, use your own!
.zoom-button {
    padding: 0;
    margin: 0;
    border-radius: 50%;
    text-align: center;
    width: 40px;
    height: 40px;
    overflow: hidden;
}