Star

Angular organogram

Angular organogram working example on codesandbox.


Component installation

npm i @jsuites/organogram

Organogram component

organogram.component.ts

import {
  AfterViewInit,
  Component,
  ElementRef,
  Input,
  ViewChild
} from "@angular/core";

@Component({
  selector: "app-organogram",
  templateUrl: "./organogram.component.html",
  styleUrls: ["./organogram.component.css"]
})

export class OrganogramComponent implements AfterViewInit {
  @Input()
  properties: Object;

  @ViewChild("organogram") organogram: ElementRef;

  ngAfterViewInit() {
    organogram(this.organogram.nativeElement, this.properties);
  }
}

Component state

app.component.ts

import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  handleOrganogramClick = (el, obj, event) => {
    console.log(event.target);
  };
}

Component template

organogram.component.html

<div #organogram></div>

Importing the component

app.module.ts

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";

import { AppComponent } from "./app.component";
import { OrganogramComponent } from "./organogram/organogram.component";

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

Component usage

app.component.html

<app-organogram
[properties]="{
  width: 600,
  height: 480,
  onclick: handleOrganogramClick,
  data: [
    {
      id: 1,
      name: 'Jorge',
      role: 'CEO',
      parent: 0,
      status: '#90EE90',
      img: 'https://icon-library.com/images/no-user-image-icon/no-user-image-icon-23.jpg'
    },
    {
      id: 2,
      name: 'Antonio',
      role: 'Vice president',
      parent: 1,
      status: '#90EE90',
      img: 'https://icon-library.com/images/no-user-image-icon/no-user-image-icon-23.jpg'
    },
    {
      id: 3,
      name: 'Manoel',
      role: 'Production manager',
      parent: 1,
      status: '#D3D3D3',
      img: 'https://icon-library.com/images/no-user-image-icon/no-user-image-icon-23.jpg'
    },
    {
      id: 4,
      name: 'Pedro',
      role: 'Intern',
      parent: 3,
      status: '#90EE90',
      img: 'https://icon-library.com/images/no-user-image-icon/no-user-image-icon-23.jpg'
    },
    {
      id: 5,
      name: 'Carlos',
      role: 'Intern',
      parent: 3,
      status: '#90EE90',
      img: 'https://icon-library.com/images/no-user-image-icon/no-user-image-icon-23.jpg'
    },
    {
      id: 6,
      name: 'Marcos',
      role: 'Marketing manager',
      parent: 2,
      status: '#D3D3D3',
      img: 'https://icon-library.com/images/no-user-image-icon/no-user-image-icon-23.jpg'
    },
    {
      id: 7,
      name: 'Ana',
      role: 'Sales manager',
      parent: 2,
      status: '#90EE90',
      img: 'https://icon-library.com/images/no-user-image-icon/no-user-image-icon-23.jpg'
    },
    {
      id: 8,
      name: 'Nicolly',
      role: 'Operations manager',
      parent: 2,
      status: '#D3D3D3',
      img: 'https://icon-library.com/images/no-user-image-icon/no-user-image-icon-23.jpg'
    },
    {
      id: 9,
      name: 'Paulo',
      role: 'Sales assistant',
      parent: 7,
      status: '#90EE90',
      img: 'https://icon-library.com/images/no-user-image-icon/no-user-image-icon-23.jpg'
    },
    {
      id: 10,
      name: 'Iris',
      role: 'Sales assistant',
      parent: 7,
      status: '#90EE90',
      img: 'https://icon-library.com/images/no-user-image-icon/no-user-image-icon-23.jpg'
    }
  ],
  vertical: false
}"
></app-organogram>

NOTE: Make sure to import the organogram.js and organogram.css in your angular.json or angular-cli.json

"styles": ["styles.css", "node_modules/@jsuites/organogram/organogram.css"],
"scripts": ["node_modules/@jsuites/organogram/organogram.js"]