
Product
Secure Your AI-Generated Code with Socket MCP
Socket MCP brings real-time security checks to AI-generated code, helping developers catch risky dependencies before they enter the codebase.
angular13-organization-chart
Advanced tools
An Angular 15+ library for displaying Organization charts. It's a very lightweight library with the features currently not available in any other library. It's written in pure typescript and is developed focussing on Angular projects Now the name of the package is misguiding, but no point crying over spilled milk, the other names were taken.
For using the chart, you'll need to do the following steps:
npm install angular13-organization-chart --save
Add OrgChartModule
in imports
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 // << this module
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
The data requires few parameters for displaying the correct chart:
export interface TreeNode {
// Node
children: TreeNode[];
hideChildren?: boolean;
onClick?: () => void;
// CSS (used for custom styling of individual nodes)
cssClass?: string;
css?: string;
}
For example I want my nodes to have a name, a description, and an image:
// make your own interface that extends TreeNode
interface MyTreeNode extends TreeNode {
name: string;
description?: string;
image?: string;
children: MyTreeNode[];
}
Typescript
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')
}
]
};
HTML
<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>
CSS
: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;
}
See Full Example On Github
encapsulation: ViewEncapsulation.None
Encapsulation is disabled, So... go crazy. Here is the style sheet, you can find all the classes here.
FAQs
Organization chart library for angular 15+
The npm package angular13-organization-chart receives a total of 485 weekly downloads. As such, angular13-organization-chart popularity was classified as not popular.
We found that angular13-organization-chart demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Socket MCP brings real-time security checks to AI-generated code, helping developers catch risky dependencies before they enter the codebase.
Security News
As vulnerability data bottlenecks grow, the federal government is formally investigating NIST’s handling of the National Vulnerability Database.
Research
Security News
Socket’s Threat Research Team has uncovered 60 npm packages using post-install scripts to silently exfiltrate hostnames, IP addresses, DNS servers, and user directories to a Discord-controlled endpoint.