** app.component.ts
import { Component } from "@angular/core";
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.scss"]
})
export class AppComponent {
nodes: any = [
{
name: "Sundar Pichai",
cssClass: "ngx-org-ceo",
image: "",
title: "Chief Executive Officer",
childs: [
{
name: "Thomas Kurian",
cssClass: "ngx-org-ceo",
image: "assets/person2.png",
title: "CEO, Google Cloud",
},
{
name: "Susan Wojcicki",
cssClass: "ngx-org-ceo",
image: "assets/person2.png",
title: "CEO, YouTube",
childs: [
{
name: "Beau Avril",
cssClass: "ngx-org-head",
image: "assets/person2.png",
title: "Global Head of Business Operations",
childs: []
},
{
name: "Tara Walpert Levy",
cssClass: "ngx-org-vp",
image: "assets/person2.png",
title: "VP, Agency and Brand Solutions",
childs: []
},
{
name: "Ariel Bardin",
cssClass: "ngx-org-vp",
image: "assets/person2.png",
title: "VP, Product Management",
childs: []
}
]
},
{
name: "Jeff Dean",
cssClass: "ngx-org-head",
image: "assets/person2.png",
title: "Head of Artificial Intelligence",
childs: [
{
name: "David Feinberg",
cssClass: "ngx-org-ceo",
image: "assets/person2.png",
title: "CEO, Google Health",
childs: []
}
]
}
]
},
{
name: "Sundar Pichai",
cssClass: "ngx-org-ceo",
image: "assets/person2.png",
title: "Chief Executive Officer",
childs: [
{
name: "Thomas Kurian",
cssClass: "ngx-org-ceo",
image: "assets/person2.png",
title: "CEO, Google Cloud",
},
{
name: "Susan Wojcicki",
cssClass: "ngx-org-ceo",
image: "assets/person2.png",
title: "CEO, YouTube",
childs: [
{
name: "Beau Avril",
cssClass: "ngx-org-head",
image: "assets/person2.png",
title: "Global Head of Business Operations",
childs: []
},
{
name: "Tara Walpert Levy",
cssClass: "ngx-org-vp",
image: "assets/person2.png",
title: "VP, Agency and Brand Solutions",
childs: []
},
{
name: "Ariel Bardin",
cssClass: "ngx-org-vp",
image: "assets/person2.png",
title: "VP, Product Management",
childs: []
}
]
},
{
name: "Jeff Dean",
cssClass: "ngx-org-head",
image: "assets/person2.png",
title: "Head of Artificial Intelligence",
childs: [
{
name: "David Feinberg",
cssClass: "ngx-org-ceo",
image: "assets/person2.png",
title: "CEO, Google Health",
childs: []
}
]
}
]
},
{
name: "Sundar Pichai",
cssClass: "ngx-org-ceo",
image: "assets/person2.png",
title: "Chief Executive Officer",
childs: [
{
name: "Thomas Kurian",
cssClass: "ngx-org-ceo",
image: "assets/person2.png",
title: "CEO, Google Cloud",
},
{
name: "Susan Wojcicki",
cssClass: "ngx-org-ceo",
image: "assets/person2.png",
title: "CEO, YouTube",
childs: [
{
name: "Beau Avril",
cssClass: "ngx-org-head",
image: "assets/person2.png",
title: "Global Head of Business Operations",
childs: []
},
{
name: "Tara Walpert Levy",
cssClass: "ngx-org-vp",
image: "assets/person2.png",
title: "VP, Agency and Brand Solutions",
childs: []
},
{
name: "Ariel Bardin",
cssClass: "ngx-org-vp",
image: "assets/person2.png",
title: "VP, Product Management",
childs: []
}
]
},
{
name: "Jeff Dean",
cssClass: "ngx-org-head",
image: "assets/person2.png",
title: "Head of Artificial Intelligence",
childs: [
{
name: "David Feinberg",
cssClass: "ngx-org-ceo",
image: "assets/person2.png",
title: "CEO, Google Health",
childs: []
}
]
}
]
}
];
}
** html
<ngx-org-chart [nodes]="nodes" direction="vertical" ></ngx-org-chart>
GitHub public :
https://github.com/doktoralban/appOrgChart
Yorumlar
Yorum Gönder