Как отобразить HTML внутри строки в ag-сетке?

Добавьте в columnDefs определенного столбца, ячейки которого содержат HTML:

cellRenderer: function(params) {
                            return params.value ? params.value : '';
                        }

Эта аг-сетка дурачит, думая, что вы рендерируете столбец своей собственной функцией (которой вы формально и являетесь).

Возможно, вам придется использовать свойство cellRenderer в ag-сетке следующим образом

Предположим, у вас есть html-разметка ag-grid, определенная следующим образом

<ag-grid-angular style="width: 900px; height: 115px;" class="ag-theme-fresh" [rowData]="rowData" [columnDefs]="columnDefs"></ag-grid-angular>

Lets assume that you are trying to render images in one of the columns basesd on the input text data. Say that your rowData and columnDef definition in the component.ts file are as follows

public columnDefs = [
    { headerName: 'File Type', field: 'fileType', width: 283 },
    { headerName: 'File Icon', field: 'fileIcon', width: 283, cellRenderer: this.customCellRendererFunc }
];

public rowData = [
    { 'fileType': 'ADOBE', 'fileIcon': 'pdf' },
    { 'fileType': 'WORD', 'fileIcon': 'doc' },
    { 'fileType': 'EXCEL', 'fileIcon': 'xls' }
]

Давайте попробуем отобразить значок файла в зависимости от типа файла. Итак, мой customCellRendererFunc будет следующим:

public customCellRendererFunc(params): string {
    let cellContent: string = '';
    try {
        for (let attItr: number = 0; attItr < params.value.length; attItr++) {
            let fileName: string = params.value[attItr].fileIcon;

            fileType = fileIcon;
            if (fileType === 'pdf') {
                imagePath = 'assets/pdf-icon.png';
            } else if (fileType === 'doc' || fileType === 'docx') {
                imagePath = 'assets/doc-icon.png';
            } else if (fileType === 'xls' || fileType === 'xlsx') {
                imagePath = 'assets/xls-icon.png';
            } else {
                imagePath = '';
            }


            cellContent += '<image src="' +
                imagePath + '" title="' + filetype, '"></a> &nbsp;');
        }
    } catch (exception) {

        console.error(exception);
    }

    return cellContent
}

Обязательно добавьте свои значки изображений в папку с ресурсами.

используйте cellRenderer для своего пользовательского углового HTML

import { Component } from "@angular/core";
import { ICellRendererAngularComp } from "ag-grid-angular";

@Component({
    selector: 'tooltip-cell',
    template: `<ng-template #popTemplate>
                    <div class="tooltip-renderer">
                         Created By: {{creator}} <br/>
                         Created On: {{crDateTime | date:'short'}} <br/>
                         Revised By: {{revisor}} <br/>
                         Revised On: {{revDateTime | date:'short'}} <br/>
                    </div>
                </ng-template>
                <span [tooltip]="popTemplate" placement="left" container="body" triggers="mouseenter mouseleave dblclick">{{params.value}}</span>` })

export class ToolTipRenderer implements ICellRendererAngularComp {
    public params: any;
    public creator: any;
    public crDateTime: any;
    public revisor: any;
    public revDateTime: any;

    agInit(params: any): void {
        this.params = params;
        this.creator = params.data["Creator"];
        this.crDateTime = params.data["CrDate"];
        this.revisor = params.data["Revisor"];
        this.revDateTime = params.data["RevDate"];
    }
    refresh(): boolean {
        return false;
    }
}

var colDef1 = {
    headerName: "Model Level",
    field: "ModelLevelTimeSeries.Id.Value",
    editable: false,
    cellRenderer: "tooltipRenderer",
    ...
    ....
}

Следующее устаревшее решение работает для ag-grid ‹4.

Установите для свойства angularCompileRows значение true в параметрах сетки.

Это позволит выполнять угловую компиляцию по строкам.

Свойства параметров сетки: https://www.ag-grid.com/javascript-grid-properties/index.php

Пример использования angularCompileRows можно найти здесь: https://www.ag-grid.com/angular-grid-cell-template/index.php.

Однако будьте осторожны, включение angularCompileRows замедляет работу сетки. Если у вас есть огромный объем данных и вы используете прокрутку inifite, вы можете использовать cellRenderer, чтобы вернуть собственный элемент dom с собственной привязкой событий и использовать $ scope. $ Apply () для повторной синхронизации с angular.

* Для других версий: *

Используя Angular, можно создавать рендеры ячеек, редакторы ячеек и фильтры. Выполнение каждого из них описано в соответствующем разделе.

Хотя можно использовать Angular для настройки ag-Grid, в этом нет необходимости. Сетка будет успешно работать как с Angular, так и с не-Angular частями (например, cellRenderers в Angular или обычном JavaScript). Из https://www.ag-grid.com/angular-more-details/

Мы можем использовать функцию CellRenderer для создания настраиваемого HTML-шаблона для каждой ячейки, как указано ниже. У меня была ссылка под моей подсказкой, и я не хотел показывать href тега привязки, для которого я использовал 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
    }