# spreadsheet-editor-protection

> Spreadsheet sample demonstrating worksheet and cell protection settings.

**Framework:** angular  **Component:** Spreadsheet  **Variant:** protection

## 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-protection.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-protection/protect-sheet.component.ts

```typescript
import { Component, ViewEncapsulation, Inject, ViewChild } from '@angular/core';
import { protectSheetData } from '../data';
import { SpreadsheetComponent, CellRenderEventArgs, SpreadsheetModule } from '@syncfusion/ej2-angular-spreadsheet';
/**
 * Protect sheet Spreadsheet Controller
 */
@Component({
    selector: 'control-content',
    templateUrl: 'protect-sheet.html',
    encapsulation: ViewEncapsulation.None,
    standalone: true,
    imports: [ SpreadsheetModule]
})

export class ProtectSheetComponent {
    @ViewChild('spreadsheet')
    spreadsheetObj!: SpreadsheetComponent;
    data: Object[] = protectSheetData();
    public openUrl = 'https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/open';
    public saveUrl = 'https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/save';
    created() {
        // Applied number formatting to a range
        this.spreadsheetObj.numberFormat('$#,##0.00', 'EMI Schedule!C2:F13');
        this.spreadsheetObj.numberFormat('m/d/yyyy', 'EMI Calculator!C5:C5');
        this.spreadsheetObj.numberFormat('m/d/yyyy', 'EMI Schedule!B2:B13');
    }
    beforeCellRender(args: CellRenderEventArgs) {
        // Merged cells using custom code
        if (this.spreadsheetObj.sheets[this.spreadsheetObj.activeSheetIndex].name === 'EMI Calculator' && args.address === 'B1') {
            (args.element as HTMLTableCellElement).colSpan = 2;
        }
    }
}

```

### src/components/spreadsheet-editor-protection/protect-sheet.html

```html

<div class="control-section">
    <ejs-spreadsheet #spreadsheet password="spreadsheet" [openUrl]="openUrl" [saveUrl]="saveUrl" (created)="created()" (beforeCellRender)="beforeCellRender($event)">
        <e-sheets>
            <e-sheet name="EMI Calculator" [isProtected]="true">
                <e-rows>
                    <e-row>
                        <e-cells>
                            <e-cell [index]="1" value="Home Loan Calculator" [style]="{ textAlign: 'center', fontWeight: 'bold' }"></e-cell>
                        </e-cells>
                    </e-row>
                    <e-row>
                        <e-cells>
                            <e-cell [index]="1" value="Loan Amount:"></e-cell>
                            <e-cell value="100000" format="$#,##0.00"></e-cell>
                        </e-cells>
                    </e-row>
                    <e-row>
                        <e-cells>
                            <e-cell [index]="1" value="Interest Rate:"></e-cell>
                            <e-cell value="0.08" format="0.00%"></e-cell>
                        </e-cells>
                    </e-row>
                    <e-row>
                        <e-cells>
                            <e-cell [index]="1" value="Periods (terms in year):"></e-cell>
                            <e-cell value="1"></e-cell>
                        </e-cells>
                    </e-row>
                    <e-row>
                        <e-cells>
                            <e-cell [index]="1" value="Start Date:"></e-cell>
                            <e-cell value="03-03-2020"></e-cell>
                        </e-cells>
                    </e-row>
                    <e-row>
                        <e-cells>
                            <e-cell [index]="1" value="Loan EMI:"></e-cell>
                            <e-cell value="8698.84" format="$#,##0.00"></e-cell>
                        </e-cells>
                    </e-row>
                    <e-row>
                        <e-cells>
                            <e-cell [index]="1" value="Number of Payments:"></e-cell>
                            <e-cell value="12"></e-cell>
                        </e-cells>
                    </e-row>
                    <e-row>
                        <e-cells>
                            <e-cell [index]="1" value="Total Repayment Amount:"></e-cell>
                            <e-cell value="104386.11" format="$#,##0.00"></e-cell>
                        </e-cells>
                    </e-row>
                    <e-row>
                        <e-cells>
                            <e-cell [index]="1" value="Total Interest Amount:"></e-cell>
                            <e-cell value="4386.11" format="$#,##0.00"></e-cell>
                        </e-cells>
                    </e-row>
                </e-rows>
                <e-columns>
                    <e-column [index]="1" [width]=190></e-column>
                    <e-column [width]=100></e-column>
                </e-columns>
            </e-sheet>
            <e-sheet name="EMI Schedule" [isProtected]="true">
                <e-ranges>
                    <e-range [dataSource]="data"></e-range>
                </e-ranges>
                <e-rows>
                    <e-row>
                        <e-cells>
                            <e-cell [style]="{ textAlign: 'center', fontWeight: 'bold' }">
                            </e-cell>
                            <e-cell [style]="{ textAlign: 'center', fontWeight: 'bold' }">
                            </e-cell>
                            <e-cell [style]="{ textAlign: 'center', fontWeight: 'bold' }">
                            </e-cell>
                            <e-cell [style]="{ textAlign: 'center', fontWeight: 'bold' }">
                            </e-cell>
                            <e-cell [style]="{ textAlign: 'center', fontWeight: 'bold' }">
                            </e-cell>
                            <e-cell [style]="{ textAlign: 'center', fontWeight: 'bold' }">
                            </e-cell>
                        </e-cells>
                    </e-row>
                </e-rows>
                <e-columns>
                    <e-column [index]="1" [width]=110></e-column>
                    <e-column [width]=85></e-column>
                    <e-column [width]=85></e-column>
                    <e-column [width]=80></e-column>
                    <e-column [width]=90></e-column>
                </e-columns>
            </e-sheet>
        </e-sheets>
    </ejs-spreadsheet>
</div>

```