angular6 - Aggrid assign css to cell

Question

I have a column with value like this 'A-E'. I want to apply css for each alphabet like this

Padding: 5px; background-color: red;

I have tried cellrenderer but it does not seems to work. I'm working on angular cli 6

Could you please elobrate you question, and paste your code what you have done and what you want? — Shadab Siddiqui

Tejashri Patange Tejashri Patange · Accepted Answer · 2018-07-22T21:54:33

I got the result after several attempts please see the result

What I did is in the colDefs of the column where css was to be applied I added an extra property as below:

 cellRenderer: function(params) {
    params.value = 'A-B';
    const v1 = params.value.substring(0, 1);
    const v2 = params.value.substring(2);
    return '<span style="background-color:#e585a2;padding:5px;border:1px solid black;">' + v1 + '</span>' +
    '&nbsp;<span style="background-color:#42c985;padding:5px;border:1px solid black;">' + v2 + '</span>';
  }

Note: I manipulated the params.value because data like that will be coming from my api later after modifications.

angular6 - Aggrid assign css to cell

1 Answers