How to add a custom warning icon to a cell in an Angular Spreadsheet when there is invalid data present

This knowledge base article explains you how to add a custom warning indicator to a cell in an Angular Spreadsheet when there is invalid data present. Provide the address (fetched with respect to the data length) on the e-range property of the spreadsheet component in order to add the warning icon. Using ng-template, the span element was added along with a warning icon class.

[app.component.html]

<div class="control-section">
 <ejs-spreadsheet #default="" (created)="created()">
   <e-sheets>
     <e-sheet name="Sheet1">
       <e-ranges>
         <e-range [datasource]="data"></e-range>
         <e-range [address]="address">
           <ng-template #template="" let-cell="">
             <div>
               <span *ngif="cell.value === 'ID02' || cell.value === 'ID03'" class="”e-icons" e-warning”="" title="”You" can="" have="" your="" warning="" message="" here..!”="">
               </span>
               <span> {{ cell.value }} </span>
             </div>
           </ng-template>
         </e-range>
       </e-ranges>
       <e-columns>
         <e-column [width]="”100”"></e-column>
         <e-column [width]="”100”"></e-column>
       </e-columns>
     </e-sheet>
   </e-sheets>
 </ejs-spreadsheet>
</div>

[app.component.ts]

import { Component, ViewEncapsulation, Inject, 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:B1');
   }
}

Sample Link:

https://stackblitz.com/edit/angular-jnubr5-wv9eyz?file=src%2Fapp.component.ts

Output:

For further information about this, see the documentation that follows.

https://ej2.syncfusion.com/angular/documentation/spreadsheet/getting-started

https://ej2.syncfusion.com/angular/documentation/appearance/icons#material

Conclusion
I hope you enjoyed learning about how to add a custom warning icon to a cell in an Angular Spreadsheet when there is invalid data present.

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!