Ag-grid Image rendering

I’m working on a project where I have to use ag-grid for table. I’m using angular for the project. But the problem is I want to show the user’s profile picture and name in one cell in ag-grid like the image I was attached. But I couldn’t render the image. How can I do this? I tried lots of things, but failed. Please help me to find the solution.

import { Component, OnInit } from '@angular/core';
import { HeaderService } from 'src/app/services/header.service';

declare function settingsTab(): any;

function actionCellRenderer(params: any) {
    let eGui = document.createElement("div");

    let editingCells = params.api.getEditingCells();
    // checks if the rowIndex matches in at least one of the editing cells
    let isCurrentRowEditing = editingCells.some((cell: any) => {
        return cell.rowIndex === params.node.rowIndex;
    });

    if (!isCurrentRowEditing && params.data != undefined) {
        eGui.innerHTML = `
            <button class="action-button edit">
                <svg xmlns="http://www.w3.org/2000/svg" width="14.778" height="14.908" viewBox="0 0 14.778 14.908">
                    <g id="Icon_feather-edit" data-name="Icon feather-edit" transform="translate(-2.25 -1.938)">
                    <path id="Path_652" data-name="Path 652" d="M8.939,6H4.32A1.32,1.32,0,0,0,3,7.32v9.238a1.32,1.32,0,0,0,1.32,1.32h9.238a1.32,1.32,0,0,0,1.32-1.32V11.939" transform="translate(0 -1.782)" fill="none" stroke="#e0e0e0" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
                    <path id="Path_653" data-name="Path 653" d="M18.929,3.228a1.4,1.4,0,0,1,1.98,1.98L14.64,11.477l-2.64.66.66-2.64Z" transform="translate(-5.041 0)" fill="none" stroke="#e0e0e0" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
                    </g>
                </svg>
            </button>
            <button class="action-button delete">
                <svg xmlns="http://www.w3.org/2000/svg" width="14.831" height="16.497" viewBox="0 0 14.831 16.497">
                    <path id="Path_654" data-name="Path 654" d="M16.5,6.333l-.722,10.116A1.666,1.666,0,0,1,14.113,18h-6.9a1.666,1.666,0,0,1-1.662-1.548L4.833,6.333M9,9.665v5m3.333-5v5m.833-8.332v-2.5A.833.833,0,0,0,12.332,3H9a.833.833,0,0,0-.833.833v2.5M4,6.333H17.331" transform="translate(-3.25 -2.25)" fill="none" stroke="#e0e0e0" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
                </svg>
            </button>
        `;
    }
    return eGui;
}
function roleCellRenderer(params: any) {
    let eGui = document.createElement("div");

    let editingCells = params.api.getEditingCells();
    // checks if the rowIndex matches in at least one of the editing cells
    let isCurrentRowEditing = editingCells.some((cell: any) => {
        return cell.rowIndex === params.node.rowIndex;
    });

    if (!isCurrentRowEditing && params.data != undefined) {
        eGui.innerHTML = `
        <div class="form-group" style="height: 30px;">
            <select name="role" id="role" style="height: 30px; font-weight: 500;">
                <option value="0">Admin</option>
                <option value="1" selected>Secretary</option>
                <option value="2">User</option>
            </select>
        </div>
        `;
    }
    return eGui;
}

@Component({
  selector: 'app-admin',
  templateUrl: './admin.component.html',
  styleUrls: ['./admin.component.css']
})
export class AdminComponent implements OnInit {

    public gridApi;
    defaultColDef;
    public rowData: any = [];
    public searchText: string = "";

    columnDefs = [
        { 
            headerName: "Name",
            field: "name",
            cellRenderer: ({ avatar }) => `<img style="height: 14px; width: 14px" src=${avatar} />`
        },
        { 
            headerName: "email", 
            field: "email",
            cellStyle: {
                color: '#96A0B5'
            }
        },
        { 
            headerName: "Role", 
            field: "role",
            cellRenderer: roleCellRenderer
        },
        { 
            headerName: "", 
            field: "action",
            cellRenderer: actionCellRenderer
        }
    ];

    row = [
        {
            "name": "Patrick Roberts",
            "avatar": "assets/img/patient.png",
            "email": "fionnapearson@gmail.com",
            "role": "",
            "action": ""
        },
        
    ];

    constructor(private headerService: HeaderService) { }

    ngOnInit(): void {
        Promise.resolve().then(() => this.headerService.setTitle('Admin Setup'));
        settingsTab(); // switching settings menu
    }

    onGridReady(params:any) {
        params.api.sizeColumnsToFit();
        this.rowData = this.row;
    }

}

Answer

Pass params and check params.data.avtar;

cellRenderer: (params) => `<img style="height: 14px; width: 14px" src=${params.data.avatar} />`

Or, consider creating separate component for cellRenderer

https://www.ag-grid.com/angular-data-grid/component-cell-renderer/

https://plnkr.co/edit/?p=preview&preview

Advertisement

Answer