In order to style a 3rd-party component with custom styles, I need to access the dynamically generated css classname from within an angular component.
Angular applies transformations to local css classnames for scoping purposes. However, when trying to style an ngx-datatable component with custom classnames, they no longer match due to Angular's modifications.
While adding classnames to the global scope or using ::ng-deep are solutions, I prefer not to compromise encapsulation.
dashboard-component.ts
@Component({
selector: 'app-dashboard',
templateUrl: './dashboard.component.html',
styleUrls: ['./dashboard.component.scss']
})
export class DashboardComponent {
getRowClass(row){
return 'my-class';
}
}
dashboard-component.scss
.my-class {
background: green;
}
dashboard-component.html
<ngx-datatable
[rowclass]="getRowClass"
></ngx-datatable>
I believe that accessing a reference to the css class within the component, like this._styles, which would hold the runtime-generated class name, would allow me to implement:
getRowClass(row){
return this._styles['my-class'];
}