Font awesome icon not displaying inside ag-grid cell in Angular 8

限于喜欢 提交于 2021-02-10 06:16:41

问题


I'm trying to learn Angular so following guides on installing and using ag-grid and Font Awesome, but I can't get an fa-icon to display inside an ag-grid cell using the cellRenderer. If I use the same icon HTML outside of the grid, it displays correctly. And if I put something like a link in place of the icon in the cell, it displays correctly. Here is my code:

component.ts

    import { Component } from '@angular/core'

import { faUserEdit } from '@fortawesome/free-solid-svg-icons';

@Component({
  selector: 'app-user',
  templateUrl: './user.component.html',
  styleUrls: ['./user.component.scss']
})
export class UserComponent {
  faUserEdit = faUserEdit;

  columnDefs = [
    {
      headerName: '', field: 'id',
      cellRenderer: (params) =>
        '<fa-icon [icon]="faUserEdit"></fa-icon>'
    },
    { headerName: 'Last Name', field: 'lastName'},
    { headerName: 'First Name', field: 'firstName'}
  ]
...

component.html

<ag-grid-angular class="ag-theme-material"
             [rowData]="users"
             [columnDefs]="columnDefs">
</ag-grid-angular>

回答1:


Remember, when you use inline cellRenderer - you can implement just HTML template (no logic), for logic handling you need to create custom cellRenderer which will contain needed functions and so on.

you wouldn't be able to execute component functions through cellRenderer inline implementation

But back to your issue here is a solution:

cellRenderer: (params) => { return '<i class="fas fa-user-edit"></i>'; }

Demo



来源:https://stackoverflow.com/questions/60528581/font-awesome-icon-not-displaying-inside-ag-grid-cell-in-angular-8

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!