Angular - Override CSS of swimlane/ngx-datatable

css angular sass ngx-datatable
Moriz Martiner picture Moriz Martiner · May 9, 2018 · Viewed 12.4k times · Source

I need to remove the padding from ngx-datatable header cells and body cells.

My actual solution looks like this:

.datatable-body-cell {
  padding: 0 !important;
}

.datatable-header-cell {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

calendar.component.scss

@Component({
  templateUrl: './calendar.component.html',
  styleUrls: ['./calendar.component.scss'],
  encapsulation: ViewEncapsulation.None,
  changeDetection: ChangeDetectionStrategy.OnPush,
})

calendar.component.ts

The problem I encountered is that I need to disable the ViewEncapsulation override the ngx-datatable CSS classes datatable-body-cell and datatable-header-cell. Since I use the ngx-datatable in other components as well, the CSS remains overridden when I navigate to the other components. Only when I refresh the CSS in the other components is shown as it should.

Are there any other possibilities to override CSS of a library in a component without affecting the other components?

I'm using Angular 5.

Answer

David picture David · May 9, 2018

Keep default component encapsulation and use ng-deep

:host ::ng-deep .datatable-body-cell {
  padding: 0 !important;
}

https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep

Related questions

Angular-cli from css to scss

I've read the documentation, which says that if I want to use scss I have to run the following command: ng set defaults.styleExt scss But when I do that and make that file, I still receive this error in …

Read More
Global scss variables for Angular components without importing them everytime

I do already have SCSS variables defined in src/styles/settings/_variables.scss and I am importing them into src/styles.scss, but still these variables aren't available for every single component. Is there any way to make a global …

Read More
How to use Angular 4 with SASS

I'm starting my first project using Angular4 and sass and I'm trying to figure it out how to work with sass the proper way. I'm using angular-cli and already set the default style to use scss syntax. I also already …

Read More