CODEWITHSUNDEEP
angularag-grid
Oliver
Oliver

Reputation: 151

ag-grid cellrenderer: adding html tags to cells but not in the template but as return values of a function

I have recently found ag-grid and am trying to integrate it into an existing angular project of mine. Currently, I am trying to figure out how custom cell renderers work. In the end, I want to put (somewhat) complex HTML statements in some cells depending on the cell value. But for the moment i just want to wrap the contents (simple strings) in <b></b> tags.

Basically, I have done all the essential stuff, namely:

This all worked fine, also the cellrenderer is applied to the cells! But the problem is: the <b> tags are not interpreted as HTML, but as strings and are displayed as such!

my basic-cellrendeer.component.ts looks like this:

import { Component} from '@angular/core';
import { AgRendererComponent } from 'ag-grid-angular';

@Component({
    selector: 'basic-cell',
    template: `{{valueBasic()}}`
})
export class BasicRenderer implements AgRendererComponent {
    private params:any;

    agInit(params:any):void {
        this.params = params;
    }

    refresh(params: any): boolean {
        this.params = params;

        return true;
    }

    private valueBasic():string {
        return "<b>" + this.params.value + "</b>";
    }
}

i have this in my app.component.ts

  columnDefs = [ 
    {headerName: 'Make', field: 'make', cellRenderer: 'BasicRenderer'},
    {headerName: 'Model', field: 'model'},
    {headerName: 'Price', field: 'price'}
  ];

As I said the table is shown correctly, but the first column looks like this: '<b>value1</b>', '<b>value2</b>' and so on...

But interestingly, when putting the tags into the template like this, it works:

template: `<b>{{valueBasic()}}</b>`

But that is no real solution because in the end, when everything works, I want to include more complex HTML statements, which need to be returned by a function like I tried to achieve here.

Upvotes: 4

Views: 4966

Answers (2)

Prasad Rao
Prasad Rao

Reputation: 11

We can use a CellRenderer function to Create a custom HTML template for each cell as given below. I had a link under my tooltip and I did not want to show the href of the anchor tag for which I have used innerHTML. 

{
      //field: 'TOOL_TIP',
      headerName: 'Tooltip',
      filter: 'agTextColumnFilter',
      cellRenderer: params => {
        var a = document.createElement('div');
        a.innerHTML = params.data.TOOL_TIP;
        return a;
      },
      tooltip: (params) => '' + params.value
    }

Upvotes: 0

un.spike
un.spike

Reputation: 5133

To render OWN (out of angular compilation) HTML, you have to wrap it

case 1: [innerHtml]="valueBasic()"

case 2: [innerHtml]="{{valueBasic()}}"

Here you can read more about angular interpolation

UPDATE

To make styles works you have to create another pipe

import { DomSanitizer } from '@angular/platform-browser'
import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'safeHtml'})
export class SafeHtmlPipe implements PipeTransform  {
  constructor(private sanitized: DomSanitizer) {}
  transform(value) {
    return this.sanitized.bypassSecurityTrustHtml(value);
  }
}

and can use it like :

<div [innerHtml]="valueBasic()| safeHtml"></div>

Upvotes: 2

Related Questions