How to use awesome font icons in an Angular Spreadsheet cell?

This knowledge base explains you how to use awesome font icons in an Angular Spreadsheet cell. Initially refer the font awesome CSS to the sample being rendered. Create a span element with the template property and add the font awesome class to it.

[app.component.html]

<ejs-spreadsheet #default (created)="created()">
   <e-sheets>
     <e-sheet name="Customer Details">
       <e-ranges>
         <e-range [dataSource]="data"></e-range>
         <e-range [address]="address">
           <ng-template #template let-cell>
             <div>
               <span> <i class="fas fa-user"></i> </span>
               <span> {{ cell.value }} </span>
             </div>
           </ng-template>
         </e-range>
       </e-ranges>
       <e-columns>
         <e-column [width]="180"></e-column>
         <e-column [width]="130"></e-column>
         <e-column [width]="130"></e-column>
         <e-column [width]="180"></e-column>
         <e-column [width]="130"></e-column>
         <e-column [width]="120"></e-column>
       </e-columns>
     </e-sheet>
   </e-sheets>
 </ejs-spreadsheet>

[app.component.ts]

import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { getDefaultData } from './data';
import {
 getRangeAddress,
 SpreadsheetComponent,
} from '@syncfusion/ej2-angular-spreadsheet';

@Component({
 selector: 'app-root',
 templateUrl: 'app.component.html',
 styleUrls: ['app.component.css'],
 encapsulation: ViewEncapsulation.None,
})
export class AppComponent {
 @ViewChild('default')
 public spreadsheetObj: SpreadsheetComponent;
 public data: Object[] = getDefaultData();
 // You need to pass the [start rowIndex, start colIndex, end rowIndex, end colIndex] as argument for getRangeAddress method. It will return the address in string format( eg. A1:A4)
 public address: string = getRangeAddress([1, 0, this.data.length, 0]);
 created() {
   this.spreadsheetObj.cellFormat(
     { fontWeight: 'bold', textAlign: 'center', verticalAlign: 'middle' },
     'A1:F1'
   );
 }
}

Stackblitz Sample: https://stackblitz.com/edit/angular-jnubr5-4db8wh?file=src%2Fapp.component.ts

Output:

For further information about this, see the documentation, demo and KB article that follows.

Knowledge Base:

https://support.syncfusion.com/kb/article/14324/how-to-add-a-custom-warning-icon-to-a-cell-in-an-angular-spreadsheet-when-there-is-invalid-data-present

Demo: https://ej2.syncfusion.com/angular/demos/#/material3/spreadsheet/cell-template

Documentation: https://ej2.syncfusion.com/angular/documentation/spreadsheet/template

Conclusion
I hope you enjoyed learning about how to use awesome font icons in an Angular Spreadsheet cell.

You can refer to our Angular Spreadsheet’s feature tour page to know about its other groundbreaking feature representations and documentations. You can also explore our Angular Spreadsheet example to understand how to present and manipulate data.

For current customers, you can check out our Angular components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our Angular Spreadsheet and other Angular components.

If you have any queries or require clarifications, please let us know in comments below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!