I’m using the ngx-org-chart in my proyect with Angular. The problem is that styles aren’t working.
My steps were the following:
- I have installed the package:
yarn add ngx-org-chart
-
Then, I added the ngx-org-chart imports to angular.json styles block
"styles": [ "node_modules/ngx-org-chart/_theming.scss", "src/styles.scss" ],
With only this, it doesn’t working. Then, I also tried the below:
- I have imported the styles in styles.scss with the below:
import '~ngx-org-chart/_theming.scss'
But the styles aren’t working. Can anyone help me?. Thank you
Edit
In my component, I have the next code line to use the library:
<ngx-org-chart [nodes]="nodes" direction="vertical"></ngx-org-chart>
And nodes is:
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',
},
{
name: 'Susan Wojcicki',
cssClass: 'ngx-org-ceo',
image: 'assets/node.svg',
title: 'CEO, YouTube',
childs: []
},
{
name: 'Jeff Dean',
cssClass: 'ngx-org-head',
image: 'assets/node.svg',
title: 'Head of Artificial Intelligence',
childs: [
{
name: 'David Feinberg',
cssClass: 'ngx-org-ceo',
image: 'assets/node.svg',
title: 'CEO, Google Health',
childs: []
}
]
}
]
},
];
And, in app.module.ts, I have:
@NgModule({
declarations: [
AppComponent,
EmptyRouteComponent
],
imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule,
CommonModule,
ThemeModule,
I18NextModule.forRoot(),
NgxOrgChartModule
],
providers: [
...
],
bootstrap: [AppComponent]
})
Edit 2
When styles don’t work, the chart sees so:
But it should see something like this:
Versions:
- ngx-org-chart: 1.1.1
- Angular: 11.0.5
3
Answers
Try this in your styles.css :
import ‘../node_modules/ngx-org-chart/_theming.scss’;
I added
@import '~ngx-org-chart/_theming';
instyles.scss
.Imported
import { NgxOrgChartModule } from 'ngx-org-chart';
inapp.module.ts
asIn html:
Assets are not available as i didn’t import them
Apart from what said in documentation
https://www.npmjs.com/package/ngx-org-chart
Adding this angular.json in
worked for me