# spreadsheet-editor-formula

> Spreadsheet sample demonstrating formula entry, calculation, and dependent cell updates.

**Framework:** angular  **Component:** Spreadsheet  **Variant:** formula

## Get this item

**If you are an agent, fetch the JSON.** Source is inlined, so one request is enough and no tooling is required:

```
GET https://ai.syncfusion.com/r/angular/spreadsheet-editor-formula.json
```

**Install Package(s)**

```bash
npm install @syncfusion/ej2-angular-spreadsheet
```

**Notes**

- Syncfusion release: 2026 Volume 2 (v34.1.29)
- The Syncfusion package is licensed. The composition in this file is source you own and edit. See https://ai.syncfusion.com/licensing.md

## Source files

### src/components/spreadsheet-editor-formula/formula.component.ts

```typescript
import { Component, ViewEncapsulation, Inject, ViewChild } from '@angular/core';
import { SelectionService, EditService, SheetModel, DefineNameModel, SpreadsheetModule } from '@syncfusion/ej2-angular-spreadsheet';
import { SpreadsheetComponent } from '@syncfusion/ej2-angular-spreadsheet';
import { formulaData } from '../data';
/**
 * Cell Data Binding Spreadsheet Controller
 */
@Component({
    selector: 'control-content',
    templateUrl: 'formula.html',
    providers: [SelectionService, EditService],
    encapsulation: ViewEncapsulation.None,
    standalone: true,
    imports: [SpreadsheetModule]
})

export class FormulasController {
    @ViewChild('formula')
    public spreadsheetObj!: SpreadsheetComponent;
    public data: Object[] = formulaData();
    definedNames: DefineNameModel[] = [{
        name: 'Profit', refersTo: '=F2:F11'
    },
    {
        name: 'High', refersTo: '=D2:D11'
    }];
    created() {
        // Style and number formatting
        this.spreadsheetObj.cellFormat({ fontWeight: 'bold', backgroundColor: '#279377', color: '#fff', textAlign: 'center', verticalAlign: 'middle', fontSize: '14px' }, 'A1:F1');
        this.spreadsheetObj.cellFormat({ fontWeight: 'bold', backgroundColor: '#EEEEEE' }, 'A12:F15');
        this.spreadsheetObj.numberFormat('0.00', 'F2:F11');
        this.spreadsheetObj.numberFormat('m/d/yyyy', 'A2:A11');
        this.spreadsheetObj.setRowHeight(40, 0);
    }
}

```

### src/components/spreadsheet-editor-formula/formula.html

```html
<div class="control-section">
    <ejs-spreadsheet #formula (created)="created()" [showRibbon]="false" [definedNames]="definedNames">
        <e-sheets>
            <e-sheet name="Stock Details" selectedRange="F15">
                <e-ranges>
                    <e-range [dataSource]="data"></e-range>
                </e-ranges>
                <e-rows>
                    <e-row [index]=11 [height]=25>
                        <e-cells>
                            <e-cell [index]=3 value="Average profit:"></e-cell>
                            <e-cell [index]=5 formula="=AVERAGE(Profit)" format="0.00"></e-cell>
                        </e-cells>
                    </e-row>
                    <e-row [height]=25>
                        <e-cells>
                            <e-cell [index]=3 value="Maximum stock value:"></e-cell>
                            <e-cell [index]=5 formula="=MAX(High)" format="0.00"></e-cell>
                        </e-cells>
                    </e-row>
                    <e-row [height]=25>
                        <e-cells>
                            <e-cell [index]=3 value="Minimum stock value:"></e-cell>
                            <e-cell [index]=5 formula="=MIN(E2:E11)"></e-cell>
                        </e-cells>
                    </e-row>
                    <e-row [height]=25>
                        <e-cells>
                            <e-cell [index]=3 value="Non-profitable days:"></e-cell>
                            <e-cell [index]=5 formula='=COUNTIF(F2:F11,"<=0")'></e-cell>
                        </e-cells>
                    </e-row>
                </e-rows>
                <e-columns>
                    <e-column [width]=100></e-column>
                    <e-column [width]=130></e-column>
                    <e-column [width]=140></e-column>
                    <e-column [width]=140></e-column>
                    <e-column [width]=130></e-column>
                    <e-column [width]=130></e-column>
                </e-columns>
            </e-sheet>
        </e-sheets>
    </ejs-spreadsheet>
</div>

```