Apply css class to a <div> generated by an <ng-template> within the <ngx-datatable-column>

Question

I am trying to apply display: flex property to the parent <div> of my <span>

but since the is generated by the ng-template of the ngx-datatable-column I am unable to apply it in the html.

I tried adding a style property , tried using headerClass to the ng-template but it did not work.

This is how my html looks after its rendered.

I want to add a css class or a style property to the pointed out in the image.

And this is my html before rendering

Can some one help me in adding a css class to the <div> pointed out in the image?

Answer 1

Either use style.scss, which will apply the style to all elements matching the selector, or you can encapsulate it in your own component like so :

ngx-datatable-column ::ng-deep .datatable-body-cell-label {
  ...
}

Answer 2

You can apply CSS style to autogenerated class (datatable-body-cell-label) for apply style to div.

.datatable-body-cell-label {
  display: flex
}