SpreadsheetComponent

<ejs-spreadsheet></ejs-spreadsheet>

<ejs-spreadsheet [activeSheetIndex]="1">
  <e-sheets>
    <e-sheet name="Car Sales Report"> </e-sheet>
    <e-sheet name="Car Stocks Report"> </e-sheet>
  </e-sheets>
</ejs-spreadsheet>

<ejs-spreadsheet [autoFillSettings]="autoFillSettings" [allowAutoFill]="true">
</ejs-spreadsheet>

import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { AutoFillSettingsModel } from '@syncfusion/ej2-angular-spreadsheet';
@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css'],
  encapsulation: ViewEncapsulation.None,
})
export class AppComponent {
  // Configures the autoFillSettings.
  public autoFillSettings: AutoFillSettingsModel = {
    fillType: 'CopyCells',
    showFillOptions: true,
  };
}

<ejs-spreadsheet [cellStyle]="cellStyle">
</ejs-spreadsheet>

import { Component, ViewEncapsulation } from '@angular/core';
import { CellStyleModel } from '@syncfusion/ej2-angular-spreadsheet';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css'],
  encapsulation: ViewEncapsulation.None,
})
export class AppComponent {
  // Specifies the cell style options.
  public cellStyle: CellStyleModel = {
    fontWeight: 'bold',
    fontSize: '12pt',
    fontStyle: 'italic',
    textIndent: '2pt',
    backgroundColor: '#4b5366',
    color: '#ffffff',
  };
}

<ejs-spreadsheet [cssClass]="cssClass"> </ejs-spreadsheet>

import { Component, ViewEncapsulation, ViewChild } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css'],
  encapsulation: ViewEncapsulation.None,
})
export class AppComponent {
  // Specifies the custom CSS class.
  public cssClass: string = 'e-custom1 e-custom2';
}

<ejs-spreadsheet [definedNames]="definedNames"> </ejs-spreadsheet>

import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { DefineNameModel } from '@syncfusion/ej2-spreadsheet';
@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css'],
  encapsulation: ViewEncapsulation.None,
})
export class AppComponent {
  // Set the specified cell range's name to 'Group1'.
  public definedNames: DefineNameModel[] = [
    { name: 'Group1', refersTo: 'Sheet1!A1:B5' },
  ];
}

<ejs-spreadsheet height="600px"> </ejs-spreadsheet>

<ejs-spreadsheet [openUrl]="openUrl" [saveUrl]="saveUrl" [openSettings]="openSettings">
</ejs-spreadsheet>

import { Component, ViewEncapsulation } from '@angular/core';
import { OpenSettingsModel } from '@syncfusion/ej2-angular-spreadsheet';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css'],
  encapsulation: ViewEncapsulation.None,
})
export class AppComponent {
  // Configure the open settings.
  public openSettings: OpenSettingsModel = {
    chunkSize: 100000,
    retryCount: 3
  };
  public openUrl: string =
    'https://services.syncfusion.com/angular/production/api/spreadsheet/open';
  public saveUrl: string =
    'https://services.syncfusion.com/angular/production/api/spreadsheet/save';
}

<ejs-spreadsheet [allowScrolling]="true" [scrollSettings]="scrollSettings">
</ejs-spreadsheet>

import { Component, ViewEncapsulation } from '@angular/core';
import { ScrollSettingsModel } from '@syncfusion/ej2-angular-spreadsheet';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css'],
  encapsulation: ViewEncapsulation.None,
})
export class AppComponent {
  // Configure the scroll settings.
  public scrollSettings: ScrollSettingsModel = {
    isFinite: true,
    enableVirtualization: false,
  };
}

<ejs-spreadsheet [selectionSettings]="selectionSettings">
</ejs-spreadsheet>

import { Component, ViewEncapsulation } from '@angular/core';
import { SelectionSettingsModel } from '@syncfusion/ej2-angular-spreadsheet';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css'],
  encapsulation: ViewEncapsulation.None,
})
export class AppComponent {
  // Configure the selection settings.
  public selectionSettings: SelectionSettingsModel = {
    mode: 'None'
  };
}

<ejs-spreadsheet #spreadsheet>
  <e-sheets>
    <e-sheet name="Car Sales Report">
      <e-ranges>
        <e-range [dataSource]="salesData"></e-range>
      </e-ranges>
      <e-rows>
        <e-row [index]="30">
          <e-cells>
            <e-cell [index]="4" value="Total Amount:"></e-cell>
            <e-cell formula="=SUM(F2:F30)"></e-cell>
          </e-cells>
        </e-row>
      </e-rows>
    </e-sheet>
    <e-sheet name="Car Stock Report"> </e-sheet>
  </e-sheets>
</ejs-spreadsheet>

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

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css'],
  encapsulation: ViewEncapsulation.None,
})
export class AppComponent {
  public salesData: Object[] = getSalesData();
}

<ejs-spreadsheet width="600px"> </ejs-spreadsheet>

 <ejs-spreadsheet #spreadsheet (contextMenuBeforeOpen)="contextMenuBeforeOpen($event)"></ejs-spreadsheet>

import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { SpreadsheetComponent } from '@syncfusion/ej2-angular-spreadsheet';
import { closest } from '@syncfusion/ej2-base';
import { BeforeOpenCloseMenuEventArgs } from '@syncfusion/ej2-navigations';
@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css'],
  encapsulation: ViewEncapsulation.None,
})
export class AppComponent {
  @ViewChild('spreadsheet')
  public spreadsheetObj: SpreadsheetComponent;
  contextMenuBeforeOpen(args: BeforeOpenCloseMenuEventArgs): void {
    // Add context menu items in sheet content context menu.
    if (closest(args.event.target as Node, '.e-sheet-content')) {
      this.spreadsheetObj.addContextMenuItems(
        [{ text: 'Custom Item' }],
        'Paste Special',
        false
      );
    }
    // Add context menu items in column header context menu.
    else if (closest(args.event.target as Node, '.e-colhdr-table')) {
      this.spreadsheetObj.addContextMenuItems(
        [{ text: 'Custom Column' }],
        'Insert Column',
        false
      );
    }
    // Add context menu items in row header context menu.
    else if (closest(args.event.target as Node, '.e-rowhdr-table')) {
      this.spreadsheetObj.addContextMenuItems(
        [{ text: 'Custom Row' }],
        'Insert Row',
        false
      );
    }
    // Add context menu items in sheet tab context menu.
    else if (closest(args.event.target as Node, '.e-toolbar-item')) {
      this.spreadsheetObj.addContextMenuItems(
        [{ text: 'Custom Tab' }],
        'Insert',
        false
      );
    }
  }
}

<ejs-spreadsheet #spreadsheet (created)="onCreated()" ></ejs-spreadsheet>

import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { 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('spreadsheet')
  public spreadsheetObj: SpreadsheetComponent;
  SQRTHandler(number: number): number {
    return Math.sqrt(number);
  }
  onCreated(): void {
    // Add custom library function to compute the square root of a number.
    this.spreadsheetObj.addCustomFunction(this.SQRTHandler, 'SQRT');
  }
}

<ejs-spreadsheet #spreadsheet (created)="onCreated()" ></ejs-spreadsheet>

import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { 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('spreadsheet')
    public spreadsheetObj: SpreadsheetComponent;
      onCreated(): void {
       // Add data validation with the specified validation rules to the range.
        this.spreadsheetObj.addDataValidation({ type: 'TextLength', operator: 'LessThanOrEqualTo', value1: '4' }, 'A2:A5'); 
        this.spreadsheetObj.addDataValidation({ type: 'WholeNumber', operator: 'NotEqualTo', value1: '1' }, 'B2:B5');
        this.spreadsheetObj.addDataValidation({ type: 'Date', operator: 'NotEqualTo', value1: '04/11/2019' }, 'F2:F5');
        this.spreadsheetObj.addDataValidation({ type: 'Time', operator: 'Between', value1: '10:00:00 AM', value2: '11:00:00 AM' }, 'G2:G5');
        this.spreadsheetObj.addDataValidation({ type: 'Decimal', operator: 'LessThan', value1: '100000.00' }, 'H2:H5');
        // Add a cell range as a data source to the list validation dropdown.
        this.spreadsheetObj.addDataValidation({ type: 'List', inCellDropDown: true, value1: '=Sheet1!A2:A3'}, 'J2:J5'); 
        this.spreadsheetObj.addDataValidation({ type: 'List', inCellDropDown: true, value1: '10, 20, 30' }, 'I2:I5');
  }
}

 <ejs-spreadsheet #spreadsheet (created)="onCreated()" ></ejs-spreadsheet>

import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { 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('spreadsheet')
    public spreadsheetObj: SpreadsheetComponent;
    onCreated(): void {
        // Set the specified cell range's name to 'Group1'.
        this.spreadsheetObj.addDefinedName({ name: 'Group1', refersTo: '=Sheet1!B2' });
    }
}

 <ejs-spreadsheet #spreadsheet (created)="onCreated()" ></ejs-spreadsheet>

import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { 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('spreadsheet')
  public spreadsheetObj: SpreadsheetComponent;
  onCreated(): void {
    // Place the 'Print' option before the 'Save As' option in the File menu.
    this.spreadsheetObj.addFileMenuItems([{ text: 'Print' }], 'Save As', false);
  }
}

    <ejs-spreadsheet #spreadsheet></ejs-spreadsheet>
    <button (click)="onClick()">To Add Hyperlink</button>

import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { 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('spreadsheet')
    public spreadsheetObj: SpreadsheetComponent;
    onClick(): void {
        // Insert a hyperlink into the 'A5' cell.
        this.spreadsheetObj.addHyperlink("https://www.google.com/", "A5");
    }
}

 <ejs-spreadsheet #spreadsheet (created)="onCreated()">
  <e-sheets>
    <e-sheet name="Car Sales Report">
      <e-ranges>
        <e-range [dataSource]="salesData"></e-range>
      </e-ranges>
    </e-sheet>
  </e-sheets>
</ejs-spreadsheet>
<button (click)="onClick()">
  To Higlight Invalid Data
</button>

import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { SpreadsheetComponent } from '@syncfusion/ej2-angular-spreadsheet';
import { getSalesData } from './data';
@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css'],
  encapsulation: ViewEncapsulation.None,
})
export class AppComponent {
  @ViewChild('spreadsheet')
  public spreadsheetObj: SpreadsheetComponent;
  public salesData: Object[] = getSalesData();
  onClick(): void {
    // Highlight the invalid data on the specified range.
    this.spreadsheetObj.addInvalidHighlight('F2:F5');
  }
  onCreated(): void {
    // Add data validation to the specified range.
    this.spreadsheetObj.addDataValidation(
      { type: 'Decimal', operator: 'LessThan', value1: '1000.00' },
      'F2:F5'
    );
  }
}

<ejs-spreadsheet #spreadsheet (created)="onCreated()"></ejs-spreadsheet>

import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { 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('spreadsheet')
  public spreadsheetObj: SpreadsheetComponent;
  onCreated(): void {
    // Place the 'Custom' ribbon tab before the existing 'Data' tab.
    this.spreadsheetObj.addRibbonTabs(
      [
        {
          header: { text: 'Custom' },
          content: [{ text: 'Custom', tooltipText: 'Custom Button' }],
        },
      ],
      'Data'
    );
  }
}

<ejs-spreadsheet #spreadsheet (created)="onCreated()"></ejs-spreadsheet>

import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { 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('spreadsheet')
    public spreadsheetObj: SpreadsheetComponent;
    onCreated(): void {
        // Place the custom toolbar items to the 'Home' tab ribbon toolbar.
        this.spreadsheetObj.addToolbarItems('Home', [{ type: 'Separator' }, { text: 'Custom', tooltipText: 'Custom Button' }], 15);
    }
}

<ejs-spreadsheet #spreadsheet>
    <e-sheets>
        <e-sheet name="Car Sales Report">
            <e-ranges>
                <e-range [dataSource]="salesData"></e-range>
            </e-ranges>
        </e-sheet>
    </e-sheets>
</ejs-spreadsheet>
<button (click)="onClick()">To Apply Filter</button>

import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { SpreadsheetComponent } from '@syncfusion/ej2-angular-spreadsheet';
import { PredicateModel } from '@syncfusion/ej2-grids';
import { getCellIndexes, getColumnHeaderText, getCell, SheetModel } from '@syncfusion/ej2-spreadsheet';
import { getSalesData } from './data';
@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html',
    styleUrls: ['app.component.css'],
    encapsulation: ViewEncapsulation.None
})
export class AppComponent {
    @ViewChild('spreadsheet')
    public spreadsheetObj: SpreadsheetComponent;
    public salesData: Object[] = getSalesData();
    onClick(): void {
        // The filter UI is applied to the range of cells in the sheet.
        let sheet: SheetModel = this.spreadsheetObj.getActiveSheet();
        let cell: number[] = getCellIndexes(sheet.activeCell);
        let predicates: PredicateModel[] = [
            {
                field: getColumnHeaderText(cell[1] + 1),
                operator: 'equal',
                value: getCell(cell[0], cell[1], sheet).value,
                matchCase: false,
            }
        ];
        // Specifies the predicates and cell range.
        this.spreadsheetObj.applyFilter(predicates, 'A1:F1');
    }
}

<ejs-spreadsheet #spreadsheet ></ejs-spreadsheet>
<button (click)="onClick()">To AutoFit</button>

import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { 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('spreadsheet')
  public spreadsheetObj: SpreadsheetComponent;
  onClick(): void {
    // To auto fit the columns content.
    this.spreadsheetObj.autoFit('D:F');
    // To auto fit the rows content.
    this.spreadsheetObj.autoFit('5:10');
  }
}

<ejs-spreadsheet #spreadsheet></ejs-spreadsheet>
<button (click)="onClick()">To Apply Cell Format</button>

import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { SpreadsheetComponent, CellStyleModel } from '@syncfusion/ej2-angular-spreadsheet';

@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html',
    styleUrls: ['app.component.css'],
    encapsulation: ViewEncapsulation.None
})

export class AppComponent {
    @ViewChild('spreadsheet')
    public spreadsheetObj: SpreadsheetComponent;
    onClick(): void {
        // Apply the styles to the cells in the specified range.
        this.spreadsheetObj.cellFormat({ fontWeight: 'bold', fontSize: '12pt', backgroundColor: '#279377', color: '#ffffff' }, 'A2:E2');
        this.spreadsheetObj.cellFormat({ verticalAlign: 'middle', fontFamily: 'Axettac Demo' }, 'A2:E12');
        this.spreadsheetObj.cellFormat({ textAlign: 'center' }, 'A2:A12');
        // Setting text-indent to 2 and 4 column.
        let style: CellStyleModel = { textAlign: 'left', textIndent: '8pt' };
        this.spreadsheetObj.cellFormat(style, 'B2:B12');
        this.spreadsheetObj.cellFormat(style, 'D2:D12');
        this.spreadsheetObj.cellFormat({ fontStyle: 'italic', textAlign: 'right' }, 'C3:C12');
        this.spreadsheetObj.cellFormat({ textAlign: 'center' }, 'E2:E12');
    }
}

<ejs-spreadsheet #spreadsheet></ejs-spreadsheet>
<button (click)="onClick()">To Clear</button>

import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { 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('spreadsheet')
  public spreadsheetObj: SpreadsheetComponent;

  onClick(): void {
    // Clear the content within the specified range.
    this.spreadsheetObj.clear({ type: 'Clear Contents', range: 'A1:A10' });
    // Clear the formats used in the given range.
    this.spreadsheetObj.clear({ type: 'Clear Formats', range: 'A1:A10' });
    // Remove all hyperlinks from the provided range.
    this.spreadsheetObj.clear({ type: 'Clear Hyperlinks', range: 'A1:A10' });
    // Clear the content, formats and hyperlinks applied in the given range.
    this.spreadsheetObj.clear({ type: 'Clear All', range: 'B1:B10' });
  }
}

<ejs-spreadsheet #spreadsheet (created)="onCreated()">
  <e-sheets>
    <e-sheet name="Car Sales Report">
      <e-ranges>
        <e-range [dataSource]="salesData"></e-range>
      </e-ranges>
    </e-sheet>
  </e-sheets>
</ejs-spreadsheet>
<button (click)="onClick()">To Clear Conditional Format</button>

import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { SpreadsheetComponent } from '@syncfusion/ej2-angular-spreadsheet';
import { getSalesData } from './data';
@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css'],
  encapsulation: ViewEncapsulation.None,
})
export class AppComponent {
  @ViewChild('spreadsheet')
  public spreadsheetObj: SpreadsheetComponent;
  public salesData: Object[] = getSalesData();
  onClick(): void {
    // Clear the conditional format within the range specified.
    this.spreadsheetObj.clearConditionalFormat('E2:E30');
    // The range can also be specified using the sheet name.
    this.spreadsheetObj.clearConditionalFormat('Sheet1!F2:F30');
  }
  onCreated(): void {
    // Highlight the cells with a value greater than the specified value.
    this.spreadsheetObj.conditionalFormat({
      type: 'GreaterThan',
      cFColor: 'RedFT',
      value: '10/8/2014',
      range: 'E2:E30',
    });
    // Highlight the cells that have a value within the specified range.
    this.spreadsheetObj.conditionalFormat({
      type: 'Between',
      cFColor: 'GreenFT',
      value: '11/24/2014,06/26/2023',
      range: 'F2:F30',
    });
  }
}

<ejs-spreadsheet #spreadsheet (created)="onCreated()">
  <e-sheets>
    <e-sheet name="Car Sales Report">
      <e-ranges>
        <e-range [dataSource]="salesData"></e-range>
      </e-ranges>
    </e-sheet>
  </e-sheets>
</ejs-spreadsheet>
<button (click)="onClick()">To Clear the Filter</button>

import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { SpreadsheetComponent } from '@syncfusion/ej2-angular-spreadsheet';
import { PredicateModel } from '@syncfusion/ej2-grids';
import {
  getCellIndexes,
  getColumnHeaderText,
  getCell,
  SheetModel,
} from '@syncfusion/ej2-spreadsheet';
import { getSalesData } from './data';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css'],
  encapsulation: ViewEncapsulation.None,
})
export class AppComponent {
  @ViewChild('spreadsheet')
  public spreadsheetObj: SpreadsheetComponent;
  public salesData: Object[] = getSalesData();
  onClick(): void {
    this.spreadsheetObj.clearFilter();
  }
  onCreated(): void {
    // The filter UI is applied to the range of cells in the sheet.
    let sheet: SheetModel = this.spreadsheetObj.getActiveSheet();
    let cell: number[] = getCellIndexes(sheet.activeCell);
    let predicates: PredicateModel[] = [
      {
        field: getColumnHeaderText(cell[1] + 1),
        operator: 'equal',
        value: getCell(cell[0], cell[1], sheet).value,
        matchCase: false,
      },
    ];
    // Specifies the predicates and cell range.
    this.spreadsheetObj.applyFilter(predicates, 'A1:F1');
  }
}

<ejs-spreadsheet #spreadsheet ></ejs-spreadsheet>
<button (click)="onClick()">To Close Edit</button>

import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { 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('spreadsheet')
  public spreadsheetObj: SpreadsheetComponent;
  onClick(): void {
    this.spreadsheetObj.closeEdit();
  }
}

<ejs-spreadsheet #spreadsheet ></ejs-spreadsheet>
<button (click)="onClick()">To Compute Expression</button>

import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { 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('spreadsheet')
  public spreadsheetObj: SpreadsheetComponent;
  onClick(): void {
    // Calculate the result of an arithmetic expression or formula.
    let result: string | number =
      this.spreadsheetObj.computeExpression('522+1');
    let value: string | number =
      this.spreadsheetObj.computeExpression('=SUM(F2:F3)');
  }
}

<ejs-spreadsheet #spreadsheet ></ejs-spreadsheet>
<button (click)="onClick()">To apply Conditional Format</button>

import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { 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('spreadsheet')
  public spreadsheetObj: SpreadsheetComponent;
  onClick(): void {
    // Apply blue data bar to the specified range.
    this.spreadsheetObj.conditionalFormat({
      type: 'BlueDataBar',
      range: 'D3:D18',
    });
    // Apply three stars to the specified range.
    this.spreadsheetObj.conditionalFormat({
      type: 'ThreeStars',
      range: 'F3:F18',
    });
    // Highlight the cells that contain a value greater than specified value.
    this.spreadsheetObj.conditionalFormat({
      type: 'GreaterThan',
      cFColor: 'RedFT',
      value: '10/15/2023',
      range: 'E2:E30',
    });
    // Highlight the cells that contain a value between specified range.
    this.spreadsheetObj.conditionalFormat({
      type: 'Between',
      cFColor: 'GreenFT',
      value: '03/04/2023,06/26/2023',
      range: 'E2:E30',
    });
    // Highlight the cells that contain a value greater than average of specified range.
    this.spreadsheetObj.conditionalFormat({
      type: 'AboveAverage',
      cFColor: 'RedFT',
      range: 'F2:F30',
    });
    // Apply the RGY(Red-Green-Yellow) color scale to the specified range.
    this.spreadsheetObj.conditionalFormat({
      type: 'RYGColorScale',
      range: 'F2:F30',
    });
  }
}

<ejs-spreadsheet #spreadsheet>
  <e-sheets>
    <e-sheet name="Car Sales Report"> </e-sheet>
  </e-sheets>
</ejs-spreadsheet>

<button (click)="onClick()">To Copy</button>

import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { 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('spreadsheet')
  public spreadsheetObj: SpreadsheetComponent;
  onClick(): void {
    // To copy the selected cell.
    this.spreadsheetObj.copy();
    // To copy the specified cell.
    this.spreadsheetObj.copy('A2');
    // You can specify the address with sheet name.
    this.spreadsheetObj.copy('Car Sales Report!B2');
  }
}

<ejs-spreadsheet #spreadsheet >
    <e-sheets>
        <e-sheet name="Car Sales Report">
        </e-sheet>
    </e-sheets>
</ejs-spreadsheet>
<button (click)="onClick()">To Cut</button>

import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { 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('spreadsheet')
  public spreadsheetObj: SpreadsheetComponent;
  onClick(): void {
    // To cut the selected cell.
    this.spreadsheetObj.cut();
    // To cut the specified cell.
    this.spreadsheetObj.cut('A2');
    // You can specify the address with sheet name.
    this.spreadsheetObj.cut('Car Sales Report!B2');
  }
}

<ejs-spreadsheet #spreadsheet ></ejs-spreadsheet>
<button (click)="onClick()">To Delete</button>

import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { 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('spreadsheet')
  public spreadsheetObj: SpreadsheetComponent;
  onClick(): void {
    // To delete rows, columns, and sheets with the specified index.
    this.spreadsheetObj.delete(1, 1, 'Row', 'Sheet1');
    this.spreadsheetObj.delete(2, 2, 'Column', 'Sheet1');
  }
}

 <ejs-spreadsheet #spreadsheet (created)="created()"></ejs-spreadsheet>
 <button (click)="onClick()">To Delete Chart</button>

import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { 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('spreadsheet')
  public spreadsheetObj: SpreadsheetComponent;
  onClick(): void {
    // Delete the chart with the specified chart element ID from the spreadsheet.
    this.spreadsheetObj.deleteChart('Chart');
  }
  created(): void {
    // Insert a chart into a spreadsheet using the chart options specified.
    this.spreadsheetObj.insertChart([
      {
        type: 'Line',
        theme: 'Material',
        isSeriesInRows: false,
        range: 'A1:B5',
        id: 'Chart',
      },
    ]);
  }
}

 <ejs-spreadsheet #spreadsheet (created)="created()"></ejs-spreadsheet>
 <button (click)="onClick()">To Delete Image</button>

import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { 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('spreadsheet')
  public spreadsheetObj: SpreadsheetComponent;
  onClick(): void {
    // Delete the image with the specified image element ID from the spreadsheet.
    this.spreadsheetObj.deleteImage('spreadsheet_overlay_picture_1', 'A3');
  }
  created(): void {
    // Insert a image into a spreadsheet using the image options specified.
    this.spreadsheetObj.insertImage(
      [
        {
          src: 'https://www.syncfusion.com/products/essential-js2/control/images/spreadsheet/javascript-spreadsheet-cell-format.png',
          height: 400,
          width: 400,
        },
      ],
      'A1'
    );
  }
}

<ejs-spreadsheet #spreadsheet ></ejs-spreadsheet>
<button (click)="onClick()">Destroy Spreadsheet</button>

import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { 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('spreadsheet')
  public spreadsheetObj: SpreadsheetComponent;
  onClick(): void {
    this.spreadsheetObj.destroy();
  }
}

 <ejs-spreadsheet #spreadsheet></ejs-spreadsheet>
 <button (click)="onClick()">Make Duplicate Sheet</button>

import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { 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('spreadsheet')
  public spreadsheetObj: SpreadsheetComponent;
  onClick(): void {
    // Make a duplicate/copy of the active sheet in the spreadsheet.
    this.spreadsheetObj.duplicateSheet();
    // Make a duplicate/copy of the specified sheet index in the spreadsheet.
    this.spreadsheetObj.duplicateSheet(0);
  }
}

 <ejs-spreadsheet #spreadsheet (contextMenuBeforeOpen)="contextMenuBeforeOpen()"></ejs-spreadsheet>

import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { 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('spreadsheet')
  public spreadsheetObj: SpreadsheetComponent;
  contextMenuBeforeOpen(): void {
    // Disable the 'Hyperlink' context menu option.
    this.spreadsheetObj.enableContextMenuItems(['Hyperlink'], false, false);
    // You can disable the option by specifying the context menu option id.
    this.spreadsheetObj.enableContextMenuItems(
      ['spreadsheet_cmenu_copy'],
      false,
      true
    );
  }
}

 <ejs-spreadsheet #spreadsheet (fileMenuBeforeOpen)="fileMenuBeforeOpen()"></ejs-spreadsheet>

import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { 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('spreadsheet')
  public spreadsheetObj: SpreadsheetComponent;
  fileMenuBeforeOpen(): void {
    // Disable the 'New' option in the File menu.
    this.spreadsheetObj.enableFileMenuItems(['New'], false, false);
  }
}

<ejs-spreadsheet #spreadsheet ></ejs-spreadsheet>
<button (click)="onClick()">To Enable/Disable Ribbon Tabs</button>

import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { 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('spreadsheet')
  public spreadsheetObj: SpreadsheetComponent;
  onClick(): void {
    // Disable the 'Home' option in the Ribbon.
    this.spreadsheetObj.enableRibbonTabs(['Home'], false);
  }
}

<ejs-spreadsheet #spreadsheet ></ejs-spreadsheet>
<button (click)="onClick()">To Enable/Disable Toolbar Items</button>

import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { 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('spreadsheet')
  public spreadsheetObj: SpreadsheetComponent;
  onClick(): void {
    // Disable the list of toolbar items in the 'Home' ribbon tab.
    this.spreadsheetObj.enableToolbarItems(
      'Home',
      ['spreadsheet_line-through'],
      false
    );
    this.spreadsheetObj.enableToolbarItems('Home', [3, 4], false);
  }
}

<ejs-spreadsheet #spreadsheet ></ejs-spreadsheet>
<button (click)="onClick()">To End Edit</button>

import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { 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('spreadsheet')
  public spreadsheetObj: SpreadsheetComponent;
  onClick(): void {
      // If the spreadsheet is editable, you can use this method to save the cell.
      this.spreadsheetObj.endEdit();
    }
}

 <ejs-spreadsheet #spreadsheet>
  <e-sheets>
    <e-sheet name="Car Sales Report">
      <e-ranges>
        <e-range [dataSource]="salesData"></e-range>
      </e-ranges>
    </e-sheet>
  </e-sheets>
</ejs-spreadsheet>
<button (click)="onClick()">To Find</button>

import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { getSalesData } from './data';
import { SpreadsheetComponent } from '@syncfusion/ej2-angular-spreadsheet';
import { FindOptions } from '@syncfusion/ej2-spreadsheet';
@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css'],
  encapsulation: ViewEncapsulation.None,
})
export class AppComponent {
  @ViewChild('spreadsheet')
  public spreadsheetObj: SpreadsheetComponent;
  public salesData: Object[] = getSalesData();

  onClick(): void {
    // To find the cell value specified.
    let findOption: FindOptions = {
      value: 'Jenna Schoolfield',
      sheetIndex: 0,
      findOpt: 'next',
      mode: 'Sheet',
      isCSen: false,
      isEMatch: false,
      searchBy: 'By Row',
    };
    this.spreadsheetObj.find(findOption);
  }
}

 <ejs-spreadsheet #spreadsheet>
  <e-sheets>
    <e-sheet>
      <e-ranges>
        <e-range [dataSource]="salesData"></e-range>
      </e-ranges>
    </e-sheet>
  </e-sheets>
</ejs-spreadsheet>
<button (click)="onClick()">To Find All</button>

import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { getSalesData } from './data';
import { 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('spreadsheet')
  public spreadsheetObj: SpreadsheetComponent;
  public salesData: Object[] = getSalesData();

  onClick(): void {
    // To find all values that match within a sheet or workbook.
    this.spreadsheetObj.findAll(
      'card',
      'Sheet',
      false,
      false,
      this.spreadsheetObj.getActiveSheet().id - 1
    );
  }
}

<ejs-spreadsheet #spreadsheet ></ejs-spreadsheet>
<button (click)="onClick()">To Get Data</button>

import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { 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('spreadsheet')
  public spreadsheetObj: SpreadsheetComponent;
  onClick(): void {
    // Return the specified cell address data as JSON.
    this.spreadsheetObj
      .getData('Sheet1!A1:B2')
      .then((data) => console.log(data));
    this.spreadsheetObj.getData('A1:B2').then((data) => console.log(data));
  }
}

<ejs-spreadsheet #spreadsheet ></ejs-spreadsheet>
<button (click)="onClick()">To Get Display Text</button>

import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import {
  SpreadsheetComponent,
  CellModel,
  getCell,
} from '@syncfusion/ej2-angular-spreadsheet';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css'],
  encapsulation: ViewEncapsulation.None,
})
export class AppComponent {
  @ViewChild('spreadsheet')
  public spreadsheetObj: SpreadsheetComponent;
  onClick(): void {
    // Get the cell model for the given row, column, and sheet indexes.
    let cell: CellModel = getCell(0, 0, this.spreadsheetObj.getActiveSheet());
    // To get the formatted cell value, specify the cell model.
    console.log(this.spreadsheetObj.getDisplayText(cell));
  }
}

<ejs-spreadsheet #spreadsheet ></ejs-spreadsheet>
<button (click)="onClick()">GoTo</button>

import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { 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('spreadsheet')
  public spreadsheetObj: SpreadsheetComponent;
  onClick(): void {
    // To navigate to a cell address within a workbook.
    this.spreadsheetObj.goTo('B1');
    // You can navigate to a specific cell address by specifying the sheet name as well as the cell address.
    this.spreadsheetObj.goTo('Sheet2!B1');
  }
}

 <ejs-spreadsheet #spreadsheet (fileMenuBeforeOpen)="fileMenuBeforeOpen()"></ejs-spreadsheet>

import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { 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('spreadsheet')
  public spreadsheetObj: SpreadsheetComponent;

  fileMenuBeforeOpen(): void {
    //To show/hide the file menu item.
    this.spreadsheetObj.hideFileMenuItems(['New'], true);
  }
}

<ejs-spreadsheet #spreadsheet ></ejs-spreadsheet>
<button (click)="onClick()">To Hide Ribbon Tabs</button>

import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { 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('spreadsheet')
  public spreadsheetObj: SpreadsheetComponent;
  onClick(): void {
    // Hide the existing 'Formulas' and 'Insert' ribbon tabs.
    this.spreadsheetObj.hideRibbonTabs(['Formulas', 'Insert'], true);
  }
}

<ejs-spreadsheet #spreadsheet ></ejs-spreadsheet>
<button (click)="onClick()">To Hide Spinner</button>

import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { 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('spreadsheet')
  public spreadsheetObj: SpreadsheetComponent;
  onClick(): void {
    //To manually hide the displayed spinner.
    this.spreadsheetObj.hideSpinner();
  }
}

<ejs-spreadsheet #spreadsheet></ejs-spreadsheet>
<button (click)="onClick()">To Hide Toolbar Items</button>

import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { 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('spreadsheet')
  public spreadsheetObj: SpreadsheetComponent;
  onClick(): void {
    // To show or hide the ribbon toolbar items with the specified tab name and index.
    this.spreadsheetObj.hideToolbarItems(
      'Home',
      [0, 1, 2, 4, 14, 15, 22, 23, 24]
    );
    this.spreadsheetObj.hideToolbarItems('View', [1, 2]);
  }
}

<ejs-spreadsheet #spreadsheet ></ejs-spreadsheet>
<button (click)="onClick()">To Insert Chart</button>

import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { 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('spreadsheet')
  public spreadsheetObj: SpreadsheetComponent;
  onClick(): void {
    // Insert a chart into a spreadsheet using the chart options specified.
    this.spreadsheetObj.insertChart([
      {
        type: 'Line',
        theme: 'Material',
        isSeriesInRows: false,
        range: 'A1',
        id: 'Chart',
      },
    ]);
  }
}