SpreadsheetComponent

<ejs-spreadsheet></ejs-spreadsheet>

<div id='Spreadsheet'></div>

new Spreadsheet({
     activeSheetIndex: 2
...
 }, '#Spreadsheet');

<div id='Spreadsheet'></div>

new Spreadsheet({
     autoFillSettings: {
         fillType: 'FillSeries',
         showFillOptions: true
     }
...
}, '#Spreadsheet');
The autoFillSettings `fillType` property has FOUR values and it is described below:

* CopyCells: To update the copied cells of the selected range.
* FillSeries: To update the filled series of the selected range.
* FillFormattingOnly: To fill the formats only for the selected range.
* FillWithoutFormatting: To fill without the format of the selected range.

<div id='Spreadsheet'></div>

new Spreadsheet({
     ...
         cellStyle: { fontWeight: 'bold', fontSize: 12,
             fontStyle: 'italic', textIndent: '2pt'
             backgroundColor: '#4b5366', color: '#ffffff'
     },
     ...
 }, '#Spreadsheet');

<div id='spreadsheet'></div>

new Spreadsheet({
 cssClass: 'e-custom1 e-custom2',
 ...
}, '#spreadsheet');

<div id='Spreadsheet'></div>

new Spreadsheet({
     ...
     definedNames: [{ name: 'namedRange1', refersTo: 'Sheet1!A1:B5' }],
     ...
 }, '#Spreadsheet');

<div id='Spreadsheet'></div>

new Spreadsheet({
     height: '550px'
...
 }, '#Spreadsheet');

<div id='Spreadsheet'></div>

new Spreadsheet({
     scrollSettings: {
         isFinite: true,
         enableVirtualization: false
     }
...
 }, '#Spreadsheet');

<div id='Spreadsheet'></div>

new Spreadsheet({
     selectionSettings: {
         mode: 'None'
     }
...
}, '#Spreadsheet');
The selectionSettings `mode` property has three values and it is described below:

* None: Disables UI selection.
* Single: Allows single selection of cell, row, or column and disables multiple selection.
* Multiple: Allows multiple selection of cell, row, or column and disables single selection.

<div id='Spreadsheet'></div>

new Spreadsheet({
     sheets: [{
                 name: 'First Sheet',
                 range: [{ dataSource: data }],
                 rows: [{
                         index: 5,
                         cells: [{ index: 4, value: 'Total Amount:' },
                                 { formula: '=SUM(F2:F30)', style: { fontWeight: 'bold' } }]
                 }]
             }, {
                 name: 'Second Sheet',
                 columns: [{ width: 180 }, { index: 4, width: 130 }]
             }]
...
 }, '#Spreadsheet');

<div id='Spreadsheet'></div>

new Spreadsheet({
     width: '550px'
...
 }, '#Spreadsheet');

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

import { Component, ViewEncapsulation, Inject, ViewChild } from '@angular/core';
import { SpreadsheetComponent } from '@syncfusion/ej2-angular-spreadsheet';
/**
 * Default Spreadsheet Controller
 */
@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html',
    styleUrls: ['app.component.css'],
    encapsulation: ViewEncapsulation.None
})

export class AppComponent {
    constructor() {}
    @ViewChild('default')
    public spreadsheetObj: SpreadsheetComponent;
    contextMenuBeforeOpen() {
        // To add context menu items in sheet content context menu.
        if(closest(args.event.target, '.e-sheet-content')){
            this.spreadsheetObj.addContextMenuItems([{ text: 'Custom Item' }], 'Paste Special', false); //To pass the items, Item before / after that the element to be inserted, Set false if the items need to be inserted before the text.
        }
           // To add context menu items in column header context menu.
        else if(closest(args.event.target, '.e-colhdr-table')){
            this.spreadsheetObj.addContextMenuItems([{ text: 'Custom Column' }], 'Insert Column', false);
        }
        // To add context menu items in row header context menu.
        else if(closest(args.event.target, '.e-rowhdr-table')){
            this.spreadsheetObj.addContextMenuItems([{ text: 'Custom Row' }], 'Insert Row', false);
        }
        // To add context menu items in sheet tab context menu.
        else if(closest(args.event.target, '.e-toolbar-item')){
            this.spreadsheetObj.addContextMenuItems([{ text: 'Custom tab' }], 'Insert', false);
        }
    }
}

 <ejs-spreadsheet #default ></ejs-spreadsheet>
     <button id="button" (click)="onClick($event)">Add CustomFunction</button>

import { Component, ViewEncapsulation, Inject, ViewChild } from '@angular/core';
import { SpreadsheetComponent } from '@syncfusion/ej2-angular-spreadsheet';
/**
 * Default Spreadsheet Controller
 */
@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html',
    styleUrls: ['app.component.css'],
    encapsulation: ViewEncapsulation.None
})

export class AppComponent {
    constructor() {}
    @ViewChild('default')
    public spreadsheetObj: SpreadsheetComponent;
    onClick(event)
     { 
      // To add custom library function.
      this.spreadsheetObj.addCustomFunction("CustomFuntion", "SQRT"); // Custom function handler name, Custom function name
     }
}
window.CustomFuntion = num => Math.sqrt(num);

 <ejs-spreadsheet #default ></ejs-spreadsheet>
     <button id="button" (click)="onClick($event)">Add DataValidation</button>

import { Component, ViewEncapsulation, Inject, ViewChild } from '@angular/core';
import { SpreadsheetComponent } from '@syncfusion/ej2-angular-spreadsheet';
/**
 * Default Spreadsheet Controller
 */
@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html',
    styleUrls: ['app.component.css'],
    encapsulation: ViewEncapsulation.None
})

export class AppComponent {
    constructor() {}
    @ViewChild('default')
    public spreadsheetObj: SpreadsheetComponent;
    onClick(event)
     { 
        // To add the data validation
        this.spreadsheetObj.addDataValidation({ type: 'TextLength', operator: 'LessThanOrEqualTo', value1: '4' }, 'A2:A5'); // specifies the validation rules, range that needs to be add validation.
        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');
        this.spreadsheetObj.addDataValidation({ type: 'List', inCellDropDown: true, value1: '10, 20, 30' }, 'I2:I5'); // Specifies InCellDropDown option in Data Validation.
        this.spreadsheetObj.addDataValidation({ type: 'List', inCellDropDown: true, value1: '=Sheet1!A2:A3'}, 'J2:J5'); // Specifies the cell range as data source to the list validation dropdown.
     }
}

 <ejs-spreadsheet #default ></ejs-spreadsheet>
     <button id="button" (click)="onClick($event)">Add DefinedName</button>

import { Component, ViewEncapsulation, Inject, ViewChild } from '@angular/core';
import { SpreadsheetComponent } from '@syncfusion/ej2-angular-spreadsheet';
/**
 * Default Spreadsheet Controller
 */
@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html',
    styleUrls: ['app.component.css'],
    encapsulation: ViewEncapsulation.None
})

export class AppComponent {
    constructor() {}
    @ViewChild('default')
    public spreadsheetObj: SpreadsheetComponent;
    onClick(event)
     { 
      // To provide name and range arguments in this method 
      this.spreadsheetObj.addDefinedName({name: 'value', refersTo: '=Sheet1!B2' });
     }
}

 <ejs-spreadsheet #default ></ejs-spreadsheet>
     <button id="button" (click)="onClick($event)">Add File Menu Items</button>

import { Component, ViewEncapsulation, Inject, ViewChild } from '@angular/core';
import { SpreadsheetComponent } from '@syncfusion/ej2-angular-spreadsheet';
/**
 * Default Spreadsheet Controller
 */
@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html',
    styleUrls: ['app.component.css'],
    encapsulation: ViewEncapsulation.None
})

export class AppComponent {
    constructor() {}
    @ViewChild('default')
    public spreadsheetObj: SpreadsheetComponent;
    onClick(event)
     { 
      // To add custom file menu items
      this.spreadsheetObj.addFileMenuItems([{ text: 'Print' }], 'Save As', false); //Specifies the ribbon file menu items to be inserted, text, Set `false` if the `items` need to be inserted before the `text`, isUniqueId? - Set `true` if the given file menu items `text` is a unique id
     }
}

 <ejs-spreadsheet #default ></ejs-spreadsheet>
     <button id="button" (click)="onClick($event)">Add Hyperlink</button>

import { Component, ViewEncapsulation, Inject, ViewChild } from '@angular/core';
import { SpreadsheetComponent } from '@syncfusion/ej2-angular-spreadsheet';
/**
 * Default Spreadsheet Controller
 */
@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html',
    styleUrls: ['app.component.css'],
    encapsulation: ViewEncapsulation.None
})

export class AppComponent {
    constructor() {}
    @ViewChild('default')
    public spreadsheetObj: SpreadsheetComponent;
    onClick(event)
     { 
      // To add the hyperlink in the cell
      this.spreadsheetObj.addHyperlink("https://www.google.com/", "A5"); //hyperlink, address
     }
}

 <ejs-spreadsheet #default ></ejs-spreadsheet>
     <button id="button" (click)="onClick($event)">Higlight Invalid Data</button>

import { Component, ViewEncapsulation, Inject, ViewChild } from '@angular/core';
import { SpreadsheetComponent } from '@syncfusion/ej2-angular-spreadsheet';
/**
 * Default Spreadsheet Controller
 */
@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html',
    styleUrls: ['app.component.css'],
    encapsulation: ViewEncapsulation.None
})

export class AppComponent {
    constructor() {}
    @ViewChild('default')
    public spreadsheetObj: SpreadsheetComponent;
    onClick(event)
     { 
      // Highlight Invalid Data
      this.spreadsheetObj.addInvalidHighlight('A1:H5'); //range
     }
}

 <ejs-spreadsheet #default ></ejs-spreadsheet>
     <button id="button" (click)="onClick($event)">Add Ribbon Tabs</button>

import { Component, ViewEncapsulation, Inject, ViewChild } from '@angular/core';
import { SpreadsheetComponent } from '@syncfusion/ej2-angular-spreadsheet';
/**
 * Default Spreadsheet Controller
 */
@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html',
    styleUrls: ['app.component.css'],
    encapsulation: ViewEncapsulation.None
})

export class AppComponent {
    constructor() {}
    @ViewChild('default')
    public spreadsheetObj: SpreadsheetComponent;
    onClick(event)
     { 
      // To add custom ribbon tabs
      this.spreadsheetObj.addRibbonTabs([{ header: { text: 'Custom' }, content: [{ text: 'Custom', tooltipText: 'Custom Btn' }] }], 'Data'); // items , Specifies the existing ribbon header text before which the new tabs will be inserted.
     }
}

 <ejs-spreadsheet #default ></ejs-spreadsheet>
     <button id="button" (click)="onClick($event)">Add Toolbar Items</button>

import { Component, ViewEncapsulation, Inject, ViewChild } from '@angular/core';
import { SpreadsheetComponent } from '@syncfusion/ej2-angular-spreadsheet';
/**
 * Default Spreadsheet Controller
 */
@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html',
    styleUrls: ['app.component.css'],
    encapsulation: ViewEncapsulation.None
})

export class AppComponent {
    constructor() {}
    @ViewChild('default')
    public spreadsheetObj: SpreadsheetComponent;
    onClick(event)
     { 
         //To add the custom items in Spreadsheet ribbon toolbar.
      this.spreadsheetObj.addToolbarItems('Home', [{ type: 'Separator' }, { text: 'Custom', tooltipText: 'Custom Btn' }], 15); // Specifies the ribbon tab header text under which the specified items will be inserted, Specifies the ribbon toolbar items that needs to be inserted, Specifies the index text before which the new items will be inserted.
     }
}

 <ejs-spreadsheet #default ></ejs-spreadsheet>
     <button id="button" (click)="onClick($event)">AppendTo</button>

import { Component, ViewEncapsulation, Inject, ViewChild } from '@angular/core';
import { SpreadsheetComponent } from '@syncfusion/ej2-angular-spreadsheet';
/**
 * Default Spreadsheet Controller
 */
@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html',
    styleUrls: ['app.component.css'],
    encapsulation: ViewEncapsulation.None
})

export class AppComponent {
    constructor() {}
    @ViewChild('default')
    public spreadsheetObj: SpreadsheetComponent;
    onClick(event)
     { 
        //Appends the control within the given HTML Div element.
        this.spreadsheetObj.appendTo('#spreadsheet'); // pass argument as selector of the element, here we passing selector(id) of the spreadsheet element
     }
}

 <ejs-spreadsheet #default ></ejs-spreadsheet>
     <button id="button" (click)="onClick($event)">Apply Filter</button>

import { Component, ViewEncapsulation, Inject, ViewChild } from '@angular/core';
import { SpreadsheetComponent, getCellIndexes, getColumnHeaderText,getCell } from '@syncfusion/ej2-angular-spreadsheet';
/**
 * Default Spreadsheet Controller
 */
@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html',
    styleUrls: ['app.component.css'],
    encapsulation: ViewEncapsulation.None
})

export class AppComponent {
    constructor() {}
    @ViewChild('default')
    public spreadsheetObj: SpreadsheetComponent;
    onClick(event)
     { 
        // Applies the filter UI in the range of cells in the sheet.
        let sheet = this.spreadsheetObj.getActiveSheet();
        let cell = getCellIndexes(sheet.activeCell);
        let predicates = [{
        field: getColumnHeaderText(cell[1] + 1),
        operator: 'equal',
        value: getCell(cell[0], cell[1], sheet).value, matchCase: false,
        }];
        this.spreadsheetObj.applyFilter(predicates, 'A1:F1');// predicates, range
     }
}

 <ejs-spreadsheet #default ></ejs-spreadsheet>
     <button id="button" (click)="onClick($event)">AutoFit</button>

import { Component, ViewEncapsulation, Inject, ViewChild } from '@angular/core';
import { SpreadsheetComponent } from '@syncfusion/ej2-angular-spreadsheet';
/**
 * Default Spreadsheet Controller
 */
@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html',
    styleUrls: ['app.component.css'],
    encapsulation: ViewEncapsulation.None
})

export class AppComponent {
    constructor() {}
    @ViewChild('default')
    public spreadsheetObj: SpreadsheetComponent;
    onClick(event)
     { 
        //This method is used to autofit the range of rows or columns
        this.spreadsheetObj.autoFit("D:F") //To autofit the column
        this.spreadsheetObj.autoFit("5:10"); // To autofit to rows
     }
}

 <ejs-spreadsheet #default ></ejs-spreadsheet>
     <button id="button" (click)="onClick($event)">Cell Format</button>

import { Component, ViewEncapsulation, Inject, ViewChild } from '@angular/core';
import { SpreadsheetComponent, CellStyleModel } from '@syncfusion/ej2-angular-spreadsheet';
/**
 * Default Spreadsheet Controller
 */
@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html',
    styleUrls: ['app.component.css'],
    encapsulation: ViewEncapsulation.None
})

export class AppComponent {
    constructor() {}
    @ViewChild('default')
    public spreadsheetObj: SpreadsheetComponent;
    onClick(event)
     { 
        // Applies the style (font family, font weight, background color, etc…) to the specified range of cells.
        this.spreadsheetObj.cellFormat({ fontWeight: 'bold', fontSize: '12pt', backgroundColor: '#279377', color: '#ffffff' }, 'A2:E2');
        // Setting common styles to whole table cells
        this.spreadsheetObj.cellFormat({ verticalAlign: 'middle', fontFamily: 'Axettac Demo' }, 'A2:E12');
        // Column wise styles setting
        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 #default ></ejs-spreadsheet>
     <button id="button" (click)="onClick($event)">Clear</button>

import { Component, ViewEncapsulation, Inject, ViewChild } from '@angular/core';
import { SpreadsheetComponent } from '@syncfusion/ej2-angular-spreadsheet';
/**
 * Default Spreadsheet Controller
 */
@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html',
    styleUrls: ['app.component.css'],
    encapsulation: ViewEncapsulation.None
})

export class AppComponent {
    constructor() {}
    @ViewChild('default')
    public spreadsheetObj: SpreadsheetComponent;
    onClick(event)
     { 
        this.spreadsheetObj.clear({type: 'Clear Contents', range: 'A1:A10'}); // Clear the content in the provided range
        this.spreadsheetObj.clear({type: 'Clear Formats', range: 'A1:A10'}); // Clear the formats applied in the provided range
        this.spreadsheetObj.clear({type: 'Clear Hyperlinks', range: 'A1:A10'}); // Clear the hyperlinks applied in the provided range
        this.spreadsheetObj.clear({type: 'Clear All', range: 'B1:B10'}); // Clear the content, formats and hyperlinks applied in the provided range. 
     }
}

 <ejs-spreadsheet #default ></ejs-spreadsheet>
     <button id="button" (click)="onClick($event)">Clear Conditional Format</button>

import { Component, ViewEncapsulation, Inject, ViewChild } from '@angular/core';
import { SpreadsheetComponent } from '@syncfusion/ej2-angular-spreadsheet';
/**
 * Default Spreadsheet Controller
 */
@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html',
    styleUrls: ['app.component.css'],
    encapsulation: ViewEncapsulation.None
})

export class AppComponent {
    constructor() {}
    @ViewChild('default')
    public spreadsheetObj: SpreadsheetComponent;
    onClick(event)
     { 
        // This method is used to remove conditional formatting.
        this.spreadsheetObj.clearConditionalFormat("A1:B5"); // range that needs to be remove conditional formatting.
        this.spreadsheetObj.clearConditionalFormat("Sheet1!A1:B5"); // you can also specify the range with sheetname.
     }
}

 <ejs-spreadsheet #default ></ejs-spreadsheet>
     <button id="button" (click)="onClick($event)">Clear Filter</button>

import { Component, ViewEncapsulation, Inject, ViewChild } from '@angular/core';
import { SpreadsheetComponent } from '@syncfusion/ej2-angular-spreadsheet';
/**
 * Default Spreadsheet Controller
 */
@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html',
    styleUrls: ['app.component.css'],
    encapsulation: ViewEncapsulation.None
})

export class AppComponent {
    constructor() {}
    @ViewChild('default')
    public spreadsheetObj: SpreadsheetComponent;
    onClick(event)
     { 
        // Clears the filter changes of the sheet.
        this.spreadsheetObj.clearFilter();
     }
}

 <ejs-spreadsheet #default ></ejs-spreadsheet>
     <button id="button" (click)="onClick($event)">Close Edit</button>

import { Component, ViewEncapsulation, Inject, ViewChild } from '@angular/core';
import { SpreadsheetComponent } from '@syncfusion/ej2-angular-spreadsheet';
/**
 * Default Spreadsheet Controller
 */
@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html',
    styleUrls: ['app.component.css'],
    encapsulation: ViewEncapsulation.None
})

export class AppComponent {
    constructor() {}
    @ViewChild('default')
    public spreadsheetObj: SpreadsheetComponent;
    onClick(event)
     { 
        // Cancels the edited state, this will not update any value in the cell.
        this.spreadsheetObj.closeEdit();
     }
}

 <ejs-spreadsheet #default ></ejs-spreadsheet>
     <button id="button" (click)="onClick($event)">Compute Expression</button>

import { Component, ViewEncapsulation, Inject, ViewChild } from '@angular/core';
import { SpreadsheetComponent } from '@syncfusion/ej2-angular-spreadsheet';
/**
 * Default Spreadsheet Controller
 */
@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html',
    styleUrls: ['app.component.css'],
    encapsulation: ViewEncapsulation.None
})

export class AppComponent {
    constructor() {}
    @ViewChild('default')
    public spreadsheetObj: SpreadsheetComponent;
    onClick(event)
     { 
        // Used to compute the specified expression/formula.
        this.spreadsheetObj.computeExpression('522+1'); // pass the expression 
        this.spreadsheetObj.computeExpression('=SUM(F2:F3)'); //pass the formula as string.
     }
}

 <ejs-spreadsheet #default ></ejs-spreadsheet>
     <button id="button" (click)="onClick($event)">Conditional Format</button>

import { Component, ViewEncapsulation, Inject, ViewChild } from '@angular/core';
import { SpreadsheetComponent } from '@syncfusion/ej2-angular-spreadsheet';
/**
 * Default Spreadsheet Controller
 */
@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html',
    styleUrls: ['app.component.css'],
    encapsulation: ViewEncapsulation.None
})

export class AppComponent {
    constructor() {}
    @ViewChild('default')
    public spreadsheetObj: SpreadsheetComponent;
    onClick(event)
     {  // This method is used to add conditional formatting.

        // 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 #default >
    <e-sheets>
            <e-sheet name="Car Sales Report">
            </e-sheet>
    </e-sheets>
 </ejs-spreadsheet>
     <button id="button" (click)="onClick($event)">Copy</button>

import { Component, ViewEncapsulation, Inject, ViewChild } from '@angular/core';
import { SpreadsheetComponent } from '@syncfusion/ej2-angular-spreadsheet';
/**
 * Default Spreadsheet Controller
 */
@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html',
    styleUrls: ['app.component.css'],
    encapsulation: ViewEncapsulation.None
})

export class AppComponent {
    constructor() {}
    @ViewChild('default')
    public spreadsheetObj: SpreadsheetComponent;
    onClick(event)
     { 
        this.spreadsheetObj.copy(); //Copy the selected cell
        this.spreadsheetObj.copy('A2'); // specify the address
        this.spreadsheetObj.copy('Car Sales Report!B2')  // address with sheet name. 
     }
}

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

import { Component, ViewEncapsulation, Inject, ViewChild } from '@angular/core';
import { SpreadsheetComponent } from '@syncfusion/ej2-angular-spreadsheet';
/**
 * Default Spreadsheet Controller
 */
@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html',
    styleUrls: ['app.component.css'],
    encapsulation: ViewEncapsulation.None
})

export class AppComponent {
    constructor() {}
    @ViewChild('default')
    public spreadsheetObj: SpreadsheetComponent;
    onClick(event)
     { 
        this.spreadsheetObj.cut(); //cut the selected cell
        this.spreadsheetObj.cut('A2'); // specify the address
        this.spreadsheetObj.cut('Car Sales Report!B2')  // address with sheet name. 
     }
}

 <ejs-spreadsheet #default ></ejs-spreadsheet>
     <button id="button" (click)="onClick($event)">Delete</button>

import { Component, ViewEncapsulation, Inject, ViewChild } from '@angular/core';
import { SpreadsheetComponent } from '@syncfusion/ej2-angular-spreadsheet';
/**
 * Default Spreadsheet Controller
 */
@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html',
    styleUrls: ['app.component.css'],
    encapsulation: ViewEncapsulation.None
})

export class AppComponent {
    constructor() {}
    @ViewChild('default')
    public spreadsheetObj: SpreadsheetComponent;
    onClick(event)
     { 
      //Used to delete rows, columns and sheets from the spreadsheet.
      this.spreadsheetObj.delete(1, 1, "Row", "Sheet1"); // start index of row/column, end index of row/column, Model type(Row, Column, Sheet), sheet(sheet name or index)
      this.spreadsheetObj.delete(2, 2, "Column", "Sheet1"); // start index of row/column, end index of row/column, Model type(Row, Column, Sheet), sheet(sheet name or index)
     }
}

 <ejs-spreadsheet #default (created)="created()"></ejs-spreadsheet>
 <button id="button" (click)="onClick($event)">Delete Chart</button>

import { Component, ViewEncapsulation, Inject, ViewChild } from '@angular/core';
import { SpreadsheetComponent } from '@syncfusion/ej2-angular-spreadsheet';
/**
 * Default Spreadsheet Controller
 */
@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html',
    styleUrls: ['app.component.css'],
    encapsulation: ViewEncapsulation.None
})

export class AppComponent {
    constructor() {}
    @ViewChild('default')
    public spreadsheetObj: SpreadsheetComponent;
    onClick(event)
     { 
        //Used to delete the chart from spreadsheet.
        this.spreadsheetObj.deleteChart("Chart1"); // id - Specifies the chart element id.
     }
    created() {
       // Used to set the chart in spreadsheet.
        this.spreadsheetObj.insertChart([{ type: "Line", theme: "Material", isSeriesInRows: false, range: "A1", id: "Chart1"}]); // Specifies the options to insert chart in spreadsheet.
    }
}

 <ejs-spreadsheet #default (created)="created()"></ejs-spreadsheet>
 <button id="button" (click)="onClick($event)">Delete Image</button>

import { Component, ViewEncapsulation, Inject, ViewChild } from '@angular/core';
import { SpreadsheetComponent } from '@syncfusion/ej2-angular-spreadsheet';
/**
 * Default Spreadsheet Controller
 */
@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html',
    styleUrls: ['app.component.css'],
    encapsulation: ViewEncapsulation.None
})

export class AppComponent {
    constructor() {}
    @ViewChild('default')
    public spreadsheetObj: SpreadsheetComponent;
    onClick(event)
     { 
        //  Used to delete the image in spreadsheet.
        this.spreadsheetObj.deleteImage("spreadsheet_overlay_picture_1", "A3"); //id - Specifies the id of the image element to be deleted, range - Specifies the range in spreadsheet.
     }
    created() {
        // Used to set the image in spreadsheet.
      this.spreadsheetObj.insertImage([{ src: "https://www.w3schools.com/images/w3schools_green.jpg", height: 400, width: 400 }], "A1"); // images - Specifies the options to insert image in spreadsheet, Specifies the range in spreadsheet.
    }
}

 <ejs-spreadsheet #default></ejs-spreadsheet>
 <button id="button" (click)="onClick($event)">Duplicate Sheet</button>

import { Component, ViewEncapsulation, Inject, ViewChild } from '@angular/core';
import { SpreadsheetComponent } from '@syncfusion/ej2-angular-spreadsheet';
/**
 * Default Spreadsheet Controller
 */
@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html',
    styleUrls: ['app.component.css'],
    encapsulation: ViewEncapsulation.None
})

export class AppComponent {
    constructor() {}
    @ViewChild('default')
    public spreadsheetObj: SpreadsheetComponent;
    onClick(event)
     {
        // Make a duplicate/copy of the active sheet in the spreadsheet.
        this.spreadsheetObj.duplicateSheet();
        // Make a duplicate/copy of the specified sheet in the spreadsheet.
        this.spreadsheetObj.duplicateSheet(1); // index of the sheet to be duplicated   
     }
}

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

import { Component, ViewEncapsulation, Inject, ViewChild } from '@angular/core';
import { SpreadsheetComponent } from '@syncfusion/ej2-angular-spreadsheet';
/**
 * Default Spreadsheet Controller
 */
@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html',
    styleUrls: ['app.component.css'],
    encapsulation: ViewEncapsulation.None
})

export class AppComponent {
    constructor() {}
    @ViewChild('default')
    public spreadsheetObj: SpreadsheetComponent;
    contextMenuBeforeOpen() {
        //To enable / disable context menu items.
        this.spreadsheetObj.enableContextMenuItems(['Copy'], false, false); // Contextmenu Items that needs to be enabled / disabled, Set true / false to enable / disable the menu items, Set true if the given text is a unique id.
        this.spreadsheetObj.enableContextMenuItems(['spreadsheet_cmenu_copy'], false, true); // Contextmenu id that needs to be enabled / disabled, Set true / false to enable / disable the menu items, Set true if the given text is a unique id.
    }
}

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

import { Component, ViewEncapsulation, Inject, ViewChild } from '@angular/core';
import { SpreadsheetComponent } from '@syncfusion/ej2-angular-spreadsheet';
/**
 * Default Spreadsheet Controller
 */
@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html',
    styleUrls: ['app.component.css'],
    encapsulation: ViewEncapsulation.None
})

export class AppComponent {
    constructor() {}
    @ViewChild('default')
    public spreadsheetObj: SpreadsheetComponent;
    fileMenuBeforeOpen() {
         // To enable / disable file menu items.
        this.spreadsheetObj.enableFileMenuItems(['New'], false, true); //File menu Items that needs to be enabled / disabled, set `true` / `false` to enable / disable the menu items, set `true` if the   given file menu items `text` is a unique id.
    }
}

 <ejs-spreadsheet #default ></ejs-spreadsheet>
     <button id="button" (click)="onClick($event)">Enable Ribbon Tabs</button>

import { Component, ViewEncapsulation, Inject, ViewChild } from '@angular/core';
import { SpreadsheetComponent } from '@syncfusion/ej2-angular-spreadsheet';
/**
 * Default Spreadsheet Controller
 */
@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html',
    styleUrls: ['app.component.css'],
    encapsulation: ViewEncapsulation.None
})

export class AppComponent {
    constructor() {}
    @ViewChild('default')
    public spreadsheetObj: SpreadsheetComponent;
    onClick(event)
     { 
        // To enable / disable the existing ribbon tabs.
         this.spreadsheetObj.enableRibbonTabs(['Home'], false); // tabs - Specifies the ribbon tab header text which needs to be enabled / disabled, Set `true` / `false` to enable / disable the ribbon tabs.
     }
}

 <ejs-spreadsheet #default ></ejs-spreadsheet>
     <button id="button" (click)="onClick($event)">Enable Toolbar Items</button>

import { Component, ViewEncapsulation, Inject, ViewChild } from '@angular/core';
import { SpreadsheetComponent } from '@syncfusion/ej2-angular-spreadsheet';
/**
 * Default Spreadsheet Controller
 */
@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html',
    styleUrls: ['app.component.css'],
    encapsulation: ViewEncapsulation.None
})

export class AppComponent {
    constructor() {}
    @ViewChild('default')
    public spreadsheetObj: SpreadsheetComponent;
    onClick(event)
     { 
        // To Enables or disables the specified ribbon toolbar items or all ribbon items
        this.spreadsheetObj.enableToolbarItems('Home', ['spreadsheet_line-through'], false); // Specifies the ribbon tab header text under which the toolbar items need to be enabled / disabled, Specifies the toolbar item indexes / unique id's which needs to be enabled / disabled, Boolean value that determines whether the toolbar items should be enabled or disabled.
        this.spreadsheetObj.enableToolbarItems('Home', [3, 4], false); // 3,4 - index
     }
}

 <ejs-spreadsheet #default ></ejs-spreadsheet>
     <button id="button" (click)="onClick($event)">End Edit</button>

import { Component, ViewEncapsulation, Inject, ViewChild } from '@angular/core';
import { SpreadsheetComponent } from '@syncfusion/ej2-angular-spreadsheet';
/**
 * Default Spreadsheet Controller
 */
@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html',
    styleUrls: ['app.component.css'],
    encapsulation: ViewEncapsulation.None
})

export class AppComponent {
    constructor() {}
    @ViewChild('default')
    public spreadsheetObj: SpreadsheetComponent;
    onClick(event)
     { 
        // If Spreadsheet is in editable state, you can save the cell by invoking endEdit.
        this.spreadsheetObj.endEdit();
     }
}

 <ejs-spreadsheet #default ></ejs-spreadsheet>
     <button id="button" (click)="onClick($event)">Find</button>

import { Component, ViewEncapsulation, Inject, ViewChild } from '@angular/core';
import { SpreadsheetComponent, FindOptions } from '@syncfusion/ej2-angular-spreadsheet';
/**
 * Default Spreadsheet Controller
 */
@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html',
    styleUrls: ['app.component.css'],
    encapsulation: ViewEncapsulation.None
})

export class AppComponent {
    constructor() {}
    @ViewChild('default')
    public spreadsheetObj: SpreadsheetComponent;
    onClick(event)
        {
            // To find the specified cell value.
            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 #default ></ejs-spreadsheet>
     <button id="button" (click)="onClick($event)">FindAll</button>

import { Component, ViewEncapsulation, Inject, ViewChild } from '@angular/core';
import { SpreadsheetComponent, FindOptions } from '@syncfusion/ej2-angular-spreadsheet';
/**
 * Default Spreadsheet Controller
 */
@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html',
    styleUrls: ['app.component.css'],
    encapsulation: ViewEncapsulation.None
})

export class AppComponent {
    constructor() {}
    @ViewChild('default')
    public spreadsheetObj: SpreadsheetComponent;
    onClick(event)
        {
            // To Find All the Match values Address within Sheet or Workbook.
            this.spreadsheetObj.findAll('shoes', 'Sheet', false, false, spreadsheet.getActiveSheet().id); // Specifies the value to find, Specifies the value to be find within Sheet/Workbook, Specifies the find match with case sensitive or not, Specifies the find match with entire match or not,Specifies the sheetIndex
        }
}

 <ejs-spreadsheet #default ></ejs-spreadsheet>
     <button id="button" (click)="onClick($event)">Get Data</button>

import { Component, ViewEncapsulation, Inject, ViewChild } from '@angular/core';
import { SpreadsheetComponent } from '@syncfusion/ej2-angular-spreadsheet';
/**
 * Default Spreadsheet Controller
 */
@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html',
    styleUrls: ['app.component.css'],
    encapsulation: ViewEncapsulation.None
})

export class AppComponent {
    constructor() {}
    @ViewChild('default')
    public spreadsheetObj: SpreadsheetComponent;
    onClick(event)
     { 
        // Gets the range of data as JSON from the specified address.
        this.spreadsheetObj.getData("Sheet1!A1:B2").then(data => console.log(data)); // Specifies the address with sheet name for range of cells, Gets the range of data as JSON from the specified address
        this.spreadsheetObj.getData("A1:B2").then(data => console.log(data)); // Specifies the address for range of cells, Gets the range of data as JSON from the specified address
     }
}

 <ejs-spreadsheet #default ></ejs-spreadsheet>
     <button id="button" (click)="onClick($event)">Get Display Text</button>

import { Component, ViewEncapsulation, Inject, ViewChild } from '@angular/core';
import { SpreadsheetComponent, CellModel, getCell } from '@syncfusion/ej2-angular-spreadsheet';
/**
 * Default Spreadsheet Controller
 */
@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html',
    styleUrls: ['app.component.css'],
    encapsulation: ViewEncapsulation.None
})

export class AppComponent {
    constructor() {}
    @ViewChild('default')
    public spreadsheetObj: SpreadsheetComponent;
    onClick(event)
     { 
        // To Gets the formatted text of the cell.
        let cell: CellModel = getCell(0, 0, this.spreadsheetObj.getActiveSheet()); // rowIndex, colIndex, sheetIndex
        console.log(this.spreadsheetObj.getDisplayText(cell)); // to provide the cell model
     }
}

 <ejs-spreadsheet #default ></ejs-spreadsheet>
     <button id="button" (click)="onClick($event)">GoTo</button>

import { Component, ViewEncapsulation, Inject, ViewChild } from '@angular/core';
import { SpreadsheetComponent } from '@syncfusion/ej2-angular-spreadsheet';
/**
 * Default Spreadsheet Controller
 */
@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html',
    styleUrls: ['app.component.css'],
    encapsulation: ViewEncapsulation.None
})

export class AppComponent {
    constructor() {}
    @ViewChild('default')
    public spreadsheetObj: SpreadsheetComponent;
    onClick(event)
     { 
        // Used to navigate to cell address within workbook.
        this.spreadsheetObj.goTo("B1"); // pass the range
        this.spreadsheetObj.goTo("Sheet2!B1"); // You can specify the sheet name with cell address to navigate the specified cell address
     }
}

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

import { Component, ViewEncapsulation, Inject, ViewChild } from '@angular/core';
import { SpreadsheetComponent } from '@syncfusion/ej2-angular-spreadsheet';
/**
 * Default Spreadsheet Controller
 */
@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html',
    styleUrls: ['app.component.css'],
    encapsulation: ViewEncapsulation.None
})

export class AppComponent {
    constructor() {}
    @ViewChild('default')
    public spreadsheetObj: SpreadsheetComponent;

    fileMenuBeforeOpen(args) {
        //To show/hide the file menu items in Spreadsheet.
      this.spreadsheetObj.hideFileMenuItems(['PDF document'], true); // Specifies the file menu items text which is to be show/hide, Set `true` / `false` to hide / show the file menu items.
  }
}

 <ejs-spreadsheet #default ></ejs-spreadsheet>
     <button id="button" (click)="onClick($event)">Hide Ribbon Tabs</button>

import { Component, ViewEncapsulation, Inject, ViewChild } from '@angular/core';
import { SpreadsheetComponent } from '@syncfusion/ej2-angular-spreadsheet';
/**
 * Default Spreadsheet Controller
 */
@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html',
    styleUrls: ['app.component.css'],
    encapsulation: ViewEncapsulation.None
})

export class AppComponent {
    constructor() {}
    @ViewChild('default')
    public spreadsheetObj: SpreadsheetComponent;
    onClick(event)
     { 
        //To show/hide the existing ribbon tabs.
        spreadsheet.hideRibbonTabs(['Formulas', 'Insert'], true); // specifies the ribbon tab header text which needs to be shown/hidden, Set `true` / `false` to hide / show the ribbon tabs.
     }
}

 <ejs-spreadsheet #default ></ejs-spreadsheet>
     <button id="button" (click)="onClick($event)">Hide Spinner</button>

import { Component, ViewEncapsulation, Inject, ViewChild } from '@angular/core';
import { SpreadsheetComponent } from '@syncfusion/ej2-angular-spreadsheet';
/**
 * Default Spreadsheet Controller
 */
@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html',
    styleUrls: ['app.component.css'],
    encapsulation: ViewEncapsulation.None
})

export class AppComponent {
    constructor() {}
    @ViewChild('default')
    public spreadsheetObj: SpreadsheetComponent;
    onClick(event)
     { 
       //To hide showed spinner manually.
        this.spreadsheetObj.hideSpinner(); 
     }
}

 <ejs-spreadsheet #default ></ejs-spreadsheet>
     <button id="button" (click)="onClick($event)">Hide Toolbar Items</button>

import { Component, ViewEncapsulation, Inject, ViewChild } from '@angular/core';
import { SpreadsheetComponent } from '@syncfusion/ej2-angular-spreadsheet';
/**
 * Default Spreadsheet Controller
 */
@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html',
    styleUrls: ['app.component.css'],
    encapsulation: ViewEncapsulation.None
})

export class AppComponent {
    constructor() {}
    @ViewChild('default')
    public spreadsheetObj: SpreadsheetComponent;
    onClick(event)
     { 
        //To show/hide the existing Spreadsheet ribbon toolbar items.
        this.spreadsheetObj.hideToolbarItems('Home', [0, 1, 2, 4, 14, 15, 22, 23, 24]); // tab name, index
        this.spreadsheetObj.hideToolbarItems('View', [1, 2]);
     }
}

 <ejs-spreadsheet #default ></ejs-spreadsheet>
     <button id="button" (click)="onClick($event)">Insert Chart</button>

import { Component, ViewEncapsulation, Inject, ViewChild } from '@angular/core';
import { SpreadsheetComponent } from '@syncfusion/ej2-angular-spreadsheet';
/**
 * Default Spreadsheet Controller
 */
@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html',
    styleUrls: ['app.component.css'],
    encapsulation: ViewEncapsulation.None
})

export class AppComponent {
    constructor() {}
    @ViewChild('default')
    public spreadsheetObj: SpreadsheetComponent;
    onClick(event)
     { 
        // Used to set the chart in spreadsheet.
        this.spreadsheetObj.insertChart([{ type: "Line", theme: "Material", isSeriesInRows: false, range: "A1", id: "Chart1"}]); // Specifies the options to insert chart in spreadsheet.
     }
}

 <ejs-spreadsheet #default ></ejs-spreadsheet>
     <button id="button" (click)="onClick($event)">Insert Column</button>

import { Component, ViewEncapsulation, Inject, ViewChild } from '@angular/core';
import { SpreadsheetComponent } from '@syncfusion/ej2-angular-spreadsheet';
/**
 * Default Spreadsheet Controller
 */
@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html',
    styleUrls: ['app.component.css'],
    encapsulation: ViewEncapsulation.None
})

export class AppComponent {
    constructor() {}
    @ViewChild('default')
    public spreadsheetObj: SpreadsheetComponent;
    onClick(event)
     { 
        //To insert the column
        this.spreadsheetObj.insertColumn([{index: 1, width: 95}], 1); // startColumn (index, column width), endColumn
     }
}

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

import { Component, ViewEncapsulation, Inject, ViewChild } from '@angular/core';
import { SpreadsheetComponent } from '@syncfusion/ej2-angular-spreadsheet';
/**
 * Default Spreadsheet Controller
 */
@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html',
    styleUrls: ['app.component.css'],
    encapsulation: ViewEncapsulation.None
})

export class AppComponent {
    constructor() {}
    @ViewChild('default')
    public spreadsheetObj: SpreadsheetComponent;
    created() {
        // Used to set the image in spreadsheet.
      this.spreadsheetObj.insertImage([{ src: "https://www.w3schools.com/images/w3schools_green.jpg", height: 400, width: 400 }], "A1"); // images - Specifies the options to insert image in spreadsheet, Specifies the range in spreadsheet.
    }
}

 <ejs-spreadsheet #default ></ejs-spreadsheet>
     <button id="button" (click)="onClick($event)">Insert Row</button>

import { Component, ViewEncapsulation, Inject, ViewChild } from '@angular/core';
import { SpreadsheetComponent } from '@syncfusion/ej2-angular-spreadsheet';
/**
 * Default Spreadsheet Controller
 */
@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html',
    styleUrls: ['app.component.css'],
    encapsulation: ViewEncapsulation.None
})

export class AppComponent {
    constructor() {}
    @ViewChild('default')
    public spreadsheetObj: SpreadsheetComponent;
    onClick(event)
     { 
        //To insert the row
        this.spreadsheetObj.insertRow(4, 4); // startRow, endRow
     }
}

 <ejs-spreadsheet #default ></ejs-spreadsheet>
     <button id="button" (click)="onClick($event)">Insert Sheet</button>

import { Component, ViewEncapsulation, Inject, ViewChild } from '@angular/core';
import { SpreadsheetComponent } from '@syncfusion/ej2-angular-spreadsheet';
/**
 * Default Spreadsheet Controller
 */
@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html',
    styleUrls: ['app.component.css'],
    encapsulation: ViewEncapsulation.None
})

export class AppComponent {
    constructor() {}
    @ViewChild('default')
    public spreadsheetObj: SpreadsheetComponent;
    onClick(event)
     { 
       //To insert sheets in to the spreadsheet.
        this.spreadsheetObj.insertSheet(0, 2); // startSheet, endSheet
     }
}

 <ejs-spreadsheet #default ></ejs-spreadsheet>
     <button id="button" (click)="onClick($event)">Lock Cells</button>

import { Component, ViewEncapsulation, Inject, ViewChild } from '@angular/core';
import { SpreadsheetComponent } from '@syncfusion/ej2-angular-spreadsheet';
/**
 * Default Spreadsheet Controller
 */
@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html',
    styleUrls: ['app.component.css'],
    encapsulation: ViewEncapsulation.None
})

export class AppComponent {
    constructor() {}
    @ViewChild('default')
    public spreadsheetObj: SpreadsheetComponent;
    onClick(event)
     { 
        //To Applies cell lock to the specified range of cells.
        let protectSetting:ProtectSettingsModel = {
            selectCells: true,
            formatCells: false,
            formatRows: false,
            formatColumns: false,
            insertLink: false
        }
        this.spreadsheetObj.protectSheet("Issues", protectSetting);
        this.spreadsheetObj.lockCells('A2:AZ100', false); // to unlock the A2:Az100 cells
        this.spreadsheetObj.lockCells('A1:Z1', true); // to lock the A1:Z1 cells
     }
}