devextreme datagrid angular - insert an icon in a lookup column

Question

>>>>EDITED<<<<

how to insert an icon in a <dxo-lookup> column?

This is my code that works but i don't know how to procede to insert an icon

HTML

<dx-data-grid ......
   .....
   <dxi-column dataField="tipo" cellTemplate="cellTemplate">

      <dxo-lookup
           [dataSource]="typeColumsDataSource"
           valueExpr="id"
           displayExpr="descr">
      </dxo-lookup>
   </dxi-column>

   <div *dxTemplate="let data of 'cellTemplate'">
    <span class="dx-icon-home icon"></span> {{data.value}} {{data.text}}
  </div>

TYPESCRIPT

this.typeColumsDataSource = {
          store: {
              type: 'array',
              data: [
                  { id: 0, descr: 'None' },
                  { id: 1, descr: 'Gift' },
                  { id: 2, descr: 'Request' },
                  { id: 3, descr: 'Gift/Request' },
              ],
              key: "id"
          }
      };

>>>>EDITED<<<<

now i putted a fixed icon into the template, i need to change the icon according to the data.value, how can i do?

can i insert an "if" in the template? can i call a method in the component?

Answer 1

You can customize the look and feel of your column following this guide

basically this is an idea of the code needed:

onCellPrepared: function(e) {
            if(e.rowType === "data" && e.column.command === "edit") {
                var isEditing = e.row.isEditing,
                    $links = e.cellElement.find(".dx-link");

                $links.text("");

                if(isEditing){
                    $links.filter(".dx-link-save").addClass("dx-icon-save");
                    $links.filter(".dx-link-cancel").addClass("dx-icon-revert");
                } else {
                    $links.filter(".dx-link-edit").addClass("dx-icon-edit");
                    $links.filter(".dx-link-delete").addClass("dx-icon-trash");
                }
            }
        }