Add a css class to a <div> that is created by an <ng-template> inside the <ngx-datatable-column> element

Question

Add a css class to a <div> that is created by an <ng-template> inside the <ngx-datatable-column> element

I am struggling to implement the display: flex style on the parent <div> containing my <span>

However, since the <span> is dynamically generated by the ng-template of the ngx-datatable-column, I'm finding it challenging to apply this style directly in the HTML.

I've attempted adding a style property and using headerClass within the ng-template but without success.

This is how the HTML appears after being rendered:

https://i.sstatic.net/doB6u.png

I need to add a CSS class or apply a style to the <div> highlighted in the image above.

Here's the original HTML before rendering:

https://i.sstatic.net/xocZO.png

Is there anyone who can assist me in adding a CSS class to the <div> shown in the image?

html css angular sass

Answer 1

Answer №1

To apply the style to specific elements matching the selector, you have two options: either use the style.scss file, or encapsulate it in your own component as shown below:

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

Answer 2

To apply the style to specific elements matching the selector, you have two options: either use the style.scss file, or encapsulate it in your own component as shown below:

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

Answer 3

Answer №2

If you want to add some CSS styling to the automatically generated class (datatable-body-cell-label) in order to style a div element, you can do so like this:

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

Answer 4

If you want to add some CSS styling to the automatically generated class (datatable-body-cell-label) in order to style a div element, you can do so like this:

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

Add a css class to a <div> that is created by an <ng-template> inside the <ngx-datatable-column> element

Answer №1

Answer №2

Similar questions

Angular 2: Shared functions for universal component usage

In AngularJS, the process of replacing text using a filter can be achieved by following

Tslint is notifying that JSX elements without any children must be self-closing to prevent errors [Error]

Guidelines for integrating a SOAP asmx service into an Angular+8 application using XML implementation

Laravel mix is compiling the Vuetify styles in the sass file and generating an empty CSS file

Retrieve a time stamp value from a database and showcase it using jQuery

Encountering problems during installation of packages in Angular

Using jQuery to implement multiple FadeIn effects

Having trouble displaying images when uploading to a remote server

Repositioning the final row to the bottom of the container in Bootstrap 4

What are the best practices for handling context in Angular?

Building an Angular docker file is quite time-consuming

When I try to alter HTML using JS, I encounter an undefined error related to AngularJS

Is it possible to seamlessly incorporate a square image into a bootstrap background image slider without having to crop the image?

Hide/Show overflow causing a disruption in my perspective

A step-by-step guide on dynamically altering button colors in Angular 2

Aligning SVG shapes within each other

Attempting to ensure that my website is fully optimized for all devices and

What can be done to stop Bootstrap columns from shifting positions or stacking on top of each other unexpectedly?

"Creating a duplicate of an element by utilizing the `next`