{"id":21231644,"url":"https://github.com/piyalidas10/angular-6-organization-chart","last_synced_at":"2026-05-17T13:36:16.562Z","repository":{"id":38642214,"uuid":"226543114","full_name":"piyalidas10/Angular-6-Organization-Chart","owner":"piyalidas10","description":"Dynamic Organization Chart using Angular 6","archived":false,"fork":false,"pushed_at":"2023-01-01T14:10:56.000Z","size":1313,"stargazers_count":0,"open_issues_count":30,"forks_count":3,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-21T18:23:06.603Z","etag":null,"topics":["angular","angular6","chart","organization-chart"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/piyalidas10.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-12-07T16:30:35.000Z","updated_at":"2024-04-17T06:36:00.000Z","dependencies_parsed_at":"2023-01-31T23:01:34.090Z","dependency_job_id":null,"html_url":"https://github.com/piyalidas10/Angular-6-Organization-Chart","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/piyalidas10%2FAngular-6-Organization-Chart","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/piyalidas10%2FAngular-6-Organization-Chart/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/piyalidas10%2FAngular-6-Organization-Chart/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/piyalidas10%2FAngular-6-Organization-Chart/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/piyalidas10","download_url":"https://codeload.github.com/piyalidas10/Angular-6-Organization-Chart/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243674184,"owners_count":20329057,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","angular6","chart","organization-chart"],"created_at":"2024-11-20T23:47:46.522Z","updated_at":"2026-05-17T13:36:11.518Z","avatar_url":"https://github.com/piyalidas10.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"Live URL : https://piyalidas10.github.io/organizationalchart/\n\nRun Application\n\nng serve\n\n\nThere have two JSON files which are kept in assets folder ( oranganization_structure.json, employee.json ). I have implemented two components : 1. addchart - to enter data in chart 2. viewchart - to show the organization chart using directive i.e orgachart.directive.\n\nUsing this orgachart.directive, organization chart is implemented dynamically in DOM.\n\norgachart.directive\n\n      import { Directive, OnInit, DoCheck, AfterViewInit, Input, Renderer2, ElementRef, KeyValueDiffers } from '@angular/core';\n\n\n      @Directive({\n        selector: '[appOrgachart]'\n      })\n      export class OrgachartDirective implements OnInit, AfterViewInit, DoCheck {\n        @Input() empArr;\n        @Input() orgaArr;\n        @Input() isEmpArrChange;\n        oldval = [];\n        constructor(private renderer: Renderer2, private elementRef: ElementRef, private _differ: KeyValueDiffers) { }\n\n\n        ngOnInit() {\n          console.log('renderer =\u003e ', this.renderer);\n          console.log('elementRef =\u003e ', this.elementRef);\n          console.log('empArr =\u003e ', this.empArr);\n          this.createOrgaChart();\n          this.oldval = this.empArr;\n        }\n\n\n        ngDoCheck() {\n          if (this.oldval !== this.empArr) {\n            console.log('empArr updated =\u003e ', this.empArr);\n            this.createOrgaChart();\n          }\n          console.log('this._differ =\u003e ', this._differ);\n        }\n\n\n        createOrgaChart() {\n          console.log('this.empArr =\u003e ', this.empArr);\n          const supervisorList = this.empArr.map(ele =\u003e ele.supervisorid);\n          console.log('supervisorList =\u003e ', supervisorList);\n          const uniqueSuoervisorList = supervisorList.filter((ele, index) =\u003e supervisorList.indexOf(ele) === index);\n          const ulcount = uniqueSuoervisorList.length;\n          console.log('ulcount =\u003e ', ulcount);\n          const isUlEle = this.elementRef.nativeElement.querySelectorAll('ul');\n          console.log('isUlEle =\u003e ', isUlEle);\n          if (isUlEle.length \u003e 0) {\n            Array.prototype.forEach.call(isUlEle, (node) =\u003e  {\n              node.parentNode.removeChild( node );\n            });\n          }\n          for (let i = 0; i \u003c ulcount; i++) {\n            const liLists = this.empArr.filter(ele =\u003e ele.supervisorid === i);\n            this.createUlElem(i, liLists);\n          }\n        }\n\n\n        createUlElem(parentid, liLists) {\n          console.log('liLists ------------------------------------- ', liLists);\n          const ulelem = this.renderer.createElement('ul');\n          if (parentid === 0) {\n            this.renderer.appendChild(this.elementRef.nativeElement, ulelem);\n            const lielem = this.renderer.createElement('li');\n            this.renderer.appendChild(ulelem, lielem);\n            this.insertLiText(parentid, liLists, lielem);\n          } else {\n            // const parentul = this.elementRef.nativeElement.querySelectorAll('ul:nth-child(' + parentid + ')');\n            for (let z = 0; z \u003c liLists.length; z++) {\n              console.log('supdervisor =\u003e ', liLists[z]['supervisorid']);\n              const supvisorDiv = this.elementRef.nativeElement.querySelector('#emp' + liLists[z]['supervisorid']);\n              console.log('supvisorDiv =\u003e ', supvisorDiv);\n              const supvisorLi = supvisorDiv.parentElement;\n              console.log('PIYALI =\u003e ', '#emp' + liLists[z]['supervisorid']);\n              console.log('supvisorLi =\u003e ', supvisorLi);\n              console.log('ulelem =\u003e ', ulelem);\n              this.renderer.appendChild(supvisorLi, ulelem);\n              const lielem = this.renderer.createElement('li');\n              this.renderer.appendChild(ulelem, lielem);\n              this.insertLiText(z, liLists, lielem);\n            }\n          }\n        }\n\n\n        insertLiText(item, liLists, lielem) {\n          console.log('lielem =\u003e ', lielem);\n          const div = this.renderer.createElement('div');\n          this.renderer.setAttribute(div, 'class', 'user');\n          this.renderer.setAttribute(div, 'id', 'emp' + liLists[item].empid);\n          this.renderer.appendChild(lielem, div);\n\n\n          const imgpath = this.renderer.createElement('img');\n          this.renderer.setAttribute(imgpath, 'src', 'https://s3.amazonaws.com/uifaces/faces/twitter/adellecharles/128.jpg');\n          this.renderer.setAttribute(imgpath, 'class', 'img-responsive');\n          this.renderer.appendChild(div, imgpath);\n\n\n          const divname = this.renderer.createElement('div');\n          const divname_text = this.renderer.createText(liLists[item].empname);\n          this.renderer.setAttribute(divname, 'class', 'name');\n          this.renderer.appendChild(divname, divname_text);\n          this.renderer.appendChild(div, divname);\n\n\n          const divroll = this.renderer.createElement('div');\n          const divroll_text = this.renderer.createText(liLists[item].empdesgname);\n          this.renderer.setAttribute(divroll, 'class', 'roll');\n          this.renderer.appendChild(divroll, divroll_text);\n          this.renderer.appendChild(div, divroll);\n        }\n\n\n        ngAfterViewInit() {}\n\n\n      }\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpiyalidas10%2Fangular-6-organization-chart","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpiyalidas10%2Fangular-6-organization-chart","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpiyalidas10%2Fangular-6-organization-chart/lists"}