0

So, I am using DataTable to show some data, and initializing it on the app.ts file like this;

this.dataTable = $('#dataTable').DataTable({
    columns:[
        {
            data: 'Date',
            render: (data, type, row) => {
                return `
                <div class="row">
                  <div class="col-12"><span data-toggle="tooltip" title="Date Of Closure"><fa-icon [icon]="['fas','clock']"></fa-icon></span></div>
                </div>
                `
            }
        }
    ]
});

But this way, the fa-icon does not get rendered on the front-end. It just shows like this on the dom;

<fa-icon [icon]="['fas','comment']"></fa-icon>

How can I programmatically add this icon to my table-cell?

oividiosCaeremos
  • 518
  • 1
  • 5
  • 20
  • 1
    Check https://stackoverflow.com/q/58064267/1377864 (including comments) for an approach, which you can use for this use case. Check *Angular markup* section of https://stackoverflow.com/a/41089093/1377864 and dig further from there to learn why what you attempt to do does not work in Angular in general, not only for `angular-fontawesome`. – Yaroslav Admin Mar 17 '21 at 10:24
  • 1
    Thank you for your help, it works like a charm. And also the other links for more in depth information looks good too. Thanks again :) – oividiosCaeremos Mar 17 '21 at 10:40

0 Answers0