Search code examples
vmware-clarity

Change clr-dg-placeholder icon or background image

I'm using clr-dg-placeholder to set a placeholder in a Clarity Datagrid, but I want to change the background image or icon. enter image description here

Is it possible without css?

Solution

  • You will have to turn off view encapsulation for the component that has a datagrid in it and also needs the override.

    import { Component, ViewEncapsulation } from '@angular/core';

    @Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ],
  encapsulation: ViewEncapsulation.None,
})
export class AppComponent  {}

    Then you can target the .datagrid-placeholder-image element directly and override the background-image property

    .datagrid-host .datagrid .datagrid-table .datagrid-placeholder-container .datagrid-placeholder-image{
  background-image: url('data:image/svg+xml;utf8,<svg height="100px" width="100px">YOUR SVG CODE HERE</svg>');
}

    Here is a running stackblitz with an override.