I integrated the ngx-org-chart library into my Angular project, but I'm facing issues with the styles not applying correctly.
Here are the steps I followed:
- I first installed the package using:
yarn add ngx-org-chart
Then, I added the ngx-org-chart imports to the styles block in angular.json:
"styles": [ "node_modules/ngx-org-chart/_theming.scss", "src/styles.scss" ],
Even after doing this, the styles were still not applied. I also tried:
- I imported the styles in styles.scss using:
import '~ngx-org-chart/_theming.scss'
Unfortunately, the styles are still not working. Can anyone assist me with this issue? Thank you.
Edit
In my component, I have included the following line of code to utilize the library:
<ngx-org-chart [nodes]="nodes" direction="vertical"></ngx-org-chart>
The 'nodes' data structure looks like this:
nodes: any = [
{
name: 'Sundar Pichai',
cssClass: 'ngx-org-ceo',
image: '',
title: 'Chief Executive Officer',
childs: [
{
name: 'Thomas Kurian',
cssClass: 'ngx-org-ceo',
image: 'assets/node.svg',
title: 'CEO, Google Cloud',
},
...
];
In app.module.ts, my setup includes:
@NgModule({
declarations: [
AppComponent,
EmptyRouteComponent
],
imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule,
CommonModule,
ThemeModule,
I18NextModule.forRoot(),
NgxOrgChartModule
],
providers: [
...
],
bootstrap: [AppComponent]
})
Edit 2
Despite trying various solutions, the chart is displaying incorrectly as shown here:
It should actually appear like this:
Versions:
- ngx-org-chart: 1.1.1
- Angular: 11.0.5