How to disable number formatting and apply text format in Angular Spreadsheet?

This article explains how to disable all types of number formatting and apply the “Text” format based on the entered value in an Angular Spreadsheet. This can be accomplished by assigning the “Text” format to the required cell using the setCell method within the beforeCellSave event of the Spreadsheet.

By assigning the “Text” format to the cell, any value entered will remain unchanged and will not be automatically formatted.

[app.component.html]

<ejs-spreadsheet
 #spreadsheet
 [allowAutoFill]="false"
 [allowDelete]="false"
 [allowEditing]="true"
 [allowHyperlink]="false"
 [allowInsert]="false"
 [allowMerge]="false"
 [allowNumberFormatting]="false"
 [allowScrolling]="true"
 [allowUndoRedo]="false"
 [showFormulaBar]="false"
 [showRibbon]="false"
 [showSheetTabs]="false"
 (beforeCellSave)="onBeforeCellSave($event)"
>
</ejs-spreadsheet> 

[app.component.ts]

import { EventEmitter, Component, ViewChild } from '@angular/core';
import { SpreadsheetAllModule } from '@syncfusion/ej2-angular-spreadsheet';
import { CellSaveEventArgs, SpreadsheetComponent, isNumber, setCell, getCellIndexes } from '@syncfusion/ej2-angular-spreadsheet';

@Component({
 imports: [SpreadsheetAllModule],
 standalone: true,
 selector: 'app-root',
 templateUrl: './app.component.html',
})
export class AppComponent {
 @ViewChild('spreadsheet') spreadsheet: SpreadsheetComponent;

 spreadsheetEvent: EventEmitter<any> = new EventEmitter();

 onBeforeCellSave($event: CellSaveEventArgs) {
   const value: string = $event.value.toString();
   // To check if the entered value is a number and starts with "0" for your requirement.
   if (isNumber(value)) {
     let cellIndexes: number[] = getCellIndexes($event.address.split('!')[1]);
     // Set the cell format to "Text"
     setCell(cellIndexes[0], cellIndexes[1], this.spreadsheet.getActiveSheet(), { format: '@' }, true);
     this.spreadsheet.cellFormat({ textAlign: 'right' }, $event.address);
   }
 }
} 

Sample Link: https://stackblitz.com/edit/angular-d9haa8-isamo6?file=src%2Fapp.component.ts

Output:

For more information on number formatting, you can refer to the UG link mentioned below.

UG Link: https://ej2.syncfusion.com/angular/documentation/spreadsheet/formatting#number-formatting

Conclusion

I hope you enjoyed learning disable number formatting and apply text format in Angular Spreadsheet . You can refer to our Angular Diagram feature tour page to learn about its other groundbreaking feature representations and documentation, and how to quickly get started with configuration specifications. You can also explore our Spreadsheet example to understand how to create and manipulate data.

For current customers, you can check out our 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 other controls.

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