documentation(EJ2-1025145): Porting works in Angular spreadsheet component

Document-Processing/Excel/Spreadsheet/Angular/cell-ranges-and-operations/autofill.md

@@ -0,0 +1,88 @@
+---
+layout: post
+title: Autofill in Angular Spreadsheet component | Syncfusion
+description: Learn here how to apply autofill to a range of cells in Angular Spreadsheet component of Syncfusion Essential JS 2 and more.
+control: Spreadsheet
+platform: document-processing
+documentation: ug
+---
+
+# Autofill in Angular Spreadsheet
+
+Autofill is used to fill the cells with data based on adjacent cells. It also follows a pattern from adjacent cells if available. There is no need to enter the repeated data manually. You can use `allowAutoFill` property to enable/disable the autofill support. You can also use `showFillOptions` property to enable/disable the fill option and `fillType` property to change the default autofill option which is available in `autoFillSettings`.
+
+You can do this by one of the following ways,
+
+* Using “AutoFillOptions” menu which is open, while drag and drop the cell using fill handle element.
+* Use the autoFill method programmatically.
+
+The available parameters in `autoFill` method are,
+
+| Parameter | Type | Description |
+|-----|------|----|
+| fillRange | `string` | Specifies the fill range. |
+| dataRange | `string` | Specifies the data range. |
+| direction | `AutoFillDirection` | Specifies the direction("Up","Right","Down","Left")to be filled. |
+| fillType | `AutoFillType` | Specifies the fill type("CopyCells","FillSeries","FillFormattingOnly","FillWithoutFormatting") for autofill action. |
+
+In autofill we have following options,
+
+* Copy Cells
+* Fill Series
+* Fill Formatting Only
+* Fill Without Formatting
+
+>* The default autofill option is “FillSeries” which can be referred from `fillType` property.
+
+### Copy Cells
+
+To copy the selected cell content to the adjacent cells. You can do this by one of the following ways,
+
+* Using fill handle to select the adjacent cell range and “Copy Cells” option in “AutoFillOptions” menu to fill the adjacent cells.
+* Using “CopyCells” as fill type in `autoFill` method to fill the adjacent cells.
+
+### Fill Series
+
+To fill the series of numbers, characters, or dates based on selected cell content to the adjacent cells with their formats.
+
+You can do this by one of the following ways,
+
+* Using fill handle to select the adjacent cell range and “Fill Series” option in “AutoFillOptions” menu to fill the adjacent cells.
+* Using “FillSeries” as fill type in `autoFill` method to fill the adjacent cells.
+
+### Fill Formatting Only
+
+To fill the cell style and number formatting based on the selected cell content to the adjacent cells without their content.
+
+You can do this by one of the following ways,
+
+* Using fill handle to select the adjacent cell range and “Fill Formatting Only” option in “AutoFillOptions” menu to fill the adjacent cells.
+* Using “FillFormattingOnly” as fill type in `autoFill` method to fill the adjacent cells.
+
+### Fill Without Formatting
+
+To fill series of numbers, characters, or dates based on the selected cells to the adjacent cells without their formats.
+
+You can do this by one of the following ways,
+
+* Using fill handle to select the adjacent cell range and “Fill Without Formatting” option in “AutoFillOptions” menu to fill the adjacent cells.
+* Using “FillWithoutFormatting” as fill type in `autoFill` method to fill the adjacent cells.
+
+In the following sample, you can enable/disable the fill option on the button click event by using the `showFillOptions` property in `autoFillSettings`.
+
+{% tabs %}
+{% highlight ts tabtitle="app.ts" %}
+{% include code-snippet/spreadsheet/angular/autofill-cs1/src/app.ts %}
+{% endhighlight %}
+
+{% highlight ts tabtitle="main.ts" %}
+{% include code-snippet/spreadsheet/angular/autofill-cs1/src/main.ts %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "/document-processing/samples/spreadsheet/angular/autofill-cs1" %}
+
+### Limitations
+
+- The Flash Fill feature is not supported in the autofill workflow.
+- There is limitation for autofill with conditional formatting applied cells.

Document-Processing/Excel/Spreadsheet/Angular/cell-ranges-and-operations/clear.md

@@ -0,0 +1,42 @@
+---
+layout: post
+title: Clear Cell Contents or Formats in React Spreadsheet | Syncfusion
+description: Learn here how to apply clear cell contents or formats in React Spreadsheet component of Syncfusion Essential JS 2 and more.
+control: Spreadsheet
+platform: document-processing
+documentation: ug
+---
+
+# Clear Cell Contents or Formats in React Spreadsheet
+
+The **Clear** feature enables you to remove cell contents (formulas and data) and formats (including number formats, conditional formats, and borders) from a spreadsheet. When you use **Clear All**, both the contents and formats are removed simultaneously.
+
+## Applying the Clear Feature
+
+You can clear cell contents or formats using the following approaches:
+
+- **Ribbon Toolbar:** Select the clear icon under the `Home` tab to access clear options.
+- **Programmatically:** Use the [`clear`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#clear) method.
+
+The available clear options are:
+
+| Option             | Description                                                                 |
+|--------------------|-----------------------------------------------------------------------------|
+| `Clear All`        | Clears all contents, formats, and hyperlinks.                               |
+| `Clear Formats`    | Clears only the formats (including number formats, conditional formats, and borders) in a cell. |
+| `Clear Contents`   | Clears only the contents (formulas and data) in a cell.                     |
+| `Clear Hyperlinks` | Clears only the hyperlinks in a cell.                                       |
+
+The following code example demonstrates how to clear cell contents and formats in a button click event.
+
+{% tabs %}
+{% highlight ts tabtitle="app.ts" %}
+{% include code-snippet/spreadsheet/angular/clear-cs1/src/app.ts %}
+{% endhighlight %}
+
+{% highlight ts tabtitle="main.ts" %}
+{% include code-snippet/spreadsheet/angular/clear-cs1/src/main.ts %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "/document-processing/samples/spreadsheet/angular/clear-cs1" %}

Document-Processing/Excel/Spreadsheet/Angular/cell-ranges-and-operations/clipboard.md

@@ -0,0 +1,100 @@
+---
+layout: post
+title: Clipboard in Angular Spreadsheet component | Syncfusion
+description: Learn here all about Clipboard in Syncfusion Angular Spreadsheet component of Syncfusion Essential JS 2 and more.
+control: Clipboard 
+platform: document-processing
+documentation: ug
+---
+
+# Clipboard Operations in Angular Spreadsheet component
+
+The Spreadsheet provides support for the clipboard operations (cut, copy, and paste). Clipboard operations can be enabled or disabled by setting the [`enableClipboard`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet#enableclipboard) property in Spreadsheet.
+
+> By default, the `enableClipboard` property is true.
+
+## Cut
+
+It is used to cut the data from selected range of cells, rows or columns in a spreadsheet and make it available in the clipboard.
+
+**User Interface**:
+
+Cut can be done in one of the following ways.
+
+* Using Cut button in the Ribbon’s HOME tab to perform cut operation.
+* Using Cut option in the Context Menu.
+* Using `Ctrl + X` | `Command + X` keyboard shortcut.
+* Using the [`cut`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet#cut) method.
+
+## Copy
+
+It is used to copy the data from selected range of cells, rows or columns in a spreadsheet and make it available in the clipboard.
+
+**User Interface**:
+
+Copy can be done in one of the following ways.
+
+* Using Copy button in the Ribbon’s HOME tab to perform copy operation.
+* Using Copy option in the Context Menu.
+* Using `Ctrl + C` | `Command + C` keyboard shortcut.
+* Using the [`copy`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet#copy) method.
+
+## Paste
+
+It is used to paste the clipboard data to the selected range, rows or columns. You have the following options in Paste,
+
+* `Paste Special` - You can paste the values with formatting.
+* `Paste` - You can paste only the values without formatting.
+
+It also performs for external clipboard operation. If you perform cut and paste, clipboard data will be cleared, whereas in copy and paste the clipboard contents will be maintained. If you perform paste inside the copied range, the clipboard data will be cleared.
+
+**User Interface**:
+
+Paste can be done in one of the following ways.
+
+* Using Paste button in the Ribbon’s HOME tab to perform paste operation.
+* Using Paste option in the Context Menu.
+* Using `Ctrl + V` | `Command + V` keyboard shortcut.
+* Using the [`paste`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet#paste) method.
+
+> If you use the Keyboard shortcut key for cut (`Ctrl + X`) / copy (`Ctrl + C`) from other sources, you should use `Ctrl + V` shortcut while pasting into the spreadsheet.
+
+{% tabs %}
+{% highlight ts tabtitle="app.ts" %}
+{% include code-snippet/spreadsheet/angular/clipboard-cs1/src/app.ts %}
+{% endhighlight %}
+
+{% highlight ts tabtitle="main.ts" %}
+{% include code-snippet/spreadsheet/angular/clipboard-cs1/src/main.ts %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "/document-processing/samples/spreadsheet/angular/clipboard-cs1" %}
+
+## Prevent the paste functionality
+
+The following example shows, how to prevent the paste action in spreadsheet. In [`actionBegin`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet#actionbegin) event, you can set `cancel` argument as false in paste request type.
+
+{% tabs %}
+{% highlight ts tabtitle="app.ts" %}
+{% include code-snippet/spreadsheet/angular/clipboard-cs2/src/app.ts %}
+{% endhighlight %}
+
+{% highlight ts tabtitle="main.ts" %}
+{% include code-snippet/spreadsheet/angular/clipboard-cs2/src/main.ts %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "/document-processing/samples/spreadsheet/angular/clipboard-cs2" %}
+
+## Limitations
+
+- External clipboard is not fully supported while copying data from another source and pasting into a spreadsheet, it only works with basic supports (Values, Number, cell, and Text formatting).
+- If you copy =SUM(A2,B2) and paste, the formula reference will change depending on the pasted cell address but we don't have support for nested formula(formula reference will be same).
+- Clipboard is not supported with conditional formatting (values only pasting).
+- We have limitation while copying the whole sheet data and pasting it into another sheet.
+- Paste options in Ribbon UI and context menu are not enabled when copy and paste from an external content. The external clipboard paste works only through keyboard shortcuts (Ctrl + V).
+
+## Note
+
+You can refer to our [Angular Spreadsheet](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor) feature tour page for its groundbreaking feature representations. You can also explore our [Angular Spreadsheet example](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor) to knows how to present and manipulate data.

Document-Processing/Excel/Spreadsheet/Angular/editing.md → Document-Processing/Excel/Spreadsheet/Angular/cell-ranges-and-operations/editing.md

@@ -2,14 +2,18 @@
 layout: post
 title: Editing in Angular Spreadsheet component | Syncfusion
 description: Learn here all about Editing in Syncfusion Angular Spreadsheet component of Syncfusion Essential JS 2 and more.
-platform: document-processing
 control: Editing 
+platform: document-processing
 documentation: ug
 ---
 
 # Editing in Angular Spreadsheet component
 
-You can edit the contents of a cell directly in the cell or by typing in the formula bar. By default, the editing feature is enabled in the spreadsheet. Use the [`allowEditing`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#allowediting) property to enable or disable the editing feature.
+You can edit the contents of a cell directly in the cell or by typing in the formula bar. By default, the editing feature is enabled in the spreadsheet. Use the [`allowEditing`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet#allowediting) property to enable or disable the editing feature.
+
+To get start quickly with Editing, you can check on this video:
+
+{% youtube "https://www.youtube.com/watch?v=o3hsPhqaZzY" %}
 
 ## Edit cell
 
@@ -19,24 +23,24 @@ You can start editing by one of the following ways,
 * Press `F2` key to edit the active cell.
 * Use formula bar to perform editing.
 * Use `BACKSPACE` or `SPACE` key to clear the cell content and start the edit mode.
-* Using the [`startEdit`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#startedit) method.
+* Using the [`startEdit`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet#startedit) method.
 
 ## Save cell
 
 If the cell is in editable state, you can save the edited cell by one of the following ways,
 
 * Perform mouse click on any other cell rather than the current editing cell.
 * Press `Enter` or `Tab` keys to save the edited cell content.
-* Using the [`endEdit`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#endedit) method.
+* Using the [`endEdit`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet#endedit) method.
 
 ## Cancel editing
 
 To cancel the editing without saving the changes, you can use one of the following ways,
 
 * Press `ESCAPE` key, this will remove the editable state and update the unchanged cell content.
-* Using the [`closeEdit`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#closeedit) method.
+* Using the [`closeEdit`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet#closeedit) method.
 
-The following sample shows how to prevent the editing and cell save. Here `E` column prevent the editing by using cancel argument as true in [`cellEdit`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#celledit) event. In `D` column, prevent saving the edited changes by using cancel argument as true in [`beforeCellSave`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#beforecellsave) and use [`closeEdit`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#closeedit) method in spreadsheet.
+The following sample shows how to prevent the editing and cell save. Here `E` column prevent the editing by using cancel argument as true in [`cellEdit`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet#celledit) event. In `D` column, prevent saving the edited changes by using cancel argument as true in [`beforeCellSave`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet#beforecellsave) and use [`closeEdit`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet#closeedit) method in spreadsheet.
 
 {% tabs %}
 {% highlight ts tabtitle="app.ts" %}
@@ -56,7 +60,7 @@ The following sample shows how to prevent the editing and cell save. Here `E` co
 
 ## Note
 
-You can refer to our [Angular Spreadsheet](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor) feature tour page for its groundbreaking feature representations. You can also explore our [Angular Spreadsheet example](https://document.syncfusion.com/demos/spreadsheet-editor/angular/#/material3/spreadsheet/default) to knows how to present and manipulate data.
+You can refer to our [Angular Spreadsheet](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor) feature tour page for its groundbreaking feature representations. You can also explore our [Angular Spreadsheet example](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor) to knows how to present and manipulate data.
 
 ## See Also
 

Document-Processing/Excel/Spreadsheet/Angular/cell-ranges-and-operations/merge-cells.md

@@ -0,0 +1,49 @@
+---
+layout: post
+title: Merge Cells in Angular Spreadsheet component | Syncfusion
+description: Learn here how to apply merge to a cell range in Angular Spreadsheet component of Syncfusion Essential JS 2 and more.
+control: Spreadsheet
+platform: document-processing
+documentation: ug
+---
+
+# Merge cells in Angular Spreadsheet
+
+Merge cells allows users to span two or more cells in the same row or column into a single cell. When cells with multiple values are merged, top-left most cell data will be the data for the merged cell. By default, the merge cells option is enabled. Use [`allowMerge`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#allowmerge) property to enable or disable the merge cells option in spreadsheet.
+
+You can merge the range of cells in the following ways,
+
+* Set the `rowSpan` and `colSpan` property in `cell` to merge the number of cells at initial load.
+* Select the range of cells and apply merge by selecting the desired option from ribbon toolbar.
+* Use [`merge`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#merge) method to merge the range of cells, once the component is loaded.
+
+The available merge options in spreadsheet are,
+
+| Type | Action |
+|-------|---------|
+| Merge All | Combines all the cells in a range in to a single cell (default). |
+| Merge Horizontally | Combines cells in a range as row-wise. |
+| Merge Vertically | Combines cells in a range as column-wise. |
+| UnMerge | Splits the merged cells into multiple cells. |
+
+The following code example shows the merge cells operation in spreadsheet.
+
+{% tabs %}
+{% highlight ts tabtitle="app.ts" %}
+{% include code-snippet/spreadsheet/angular/merge-cells-cs1/src/app.ts %}
+{% endhighlight %}
+
+{% highlight ts tabtitle="main.ts" %}
+{% include code-snippet/spreadsheet/angular/merge-cells-cs1/src/main.ts %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "/document-processing/samples/spreadsheet/angular/merge-cells-cs1" %}
+
+## Limitations
+
+The following features have some limitations when using merged cells:
+
+- Merge with filter.
+- Merge with wrap text.
+- Merge with border style.

Document-Processing/Excel/Spreadsheet/Angular/cell-ranges-and-operations/wrap-text.md

@@ -0,0 +1,39 @@
+---
+layout: post
+title: Wrap Text in Angular Spreadsheet component | Syncfusion
+description: Learn here how apply wrap text to cells in Angular Spreadsheet component of Syncfusion Essential JS 2 and more.
+control: Spreadsheet
+platform: document-processing
+documentation: ug
+---
+
+# Wrap text in Angular Spreadsheet
+
+Wrap text allows you to display large content as multiple lines in a single cell. By default, the wrap text support is enabled. Use the [`allowWrap`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#allowwrap) property to enable or disable the wrap text support in spreadsheet.
+
+Wrap text can be applied or removed to a cell or range of cells in the following ways,
+
+* Using the `wrap` property in `cell`, you can enable or disable wrap text to a cell at initial load.
+* Select or deselect wrap button from ribbon toolbar to apply or remove the wrap text to the selected range.
+* Using the [`wrap`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#wrap) method, you can apply or remove the wrap text once the component is loaded.
+
+The following code example shows the wrap text functionality in spreadsheet.
+
+{% tabs %}
+{% highlight ts tabtitle="app.ts" %}
+{% include code-snippet/spreadsheet/angular/wrap-text-cs1/src/app.ts %}
+{% endhighlight %}
+
+{% highlight ts tabtitle="main.ts" %}
+{% include code-snippet/spreadsheet/angular/wrap-text-cs1/src/main.ts %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "/document-processing/samples/spreadsheet/angular/wrap-text-cs1" %}
+
+## Limitations
+
+The following features have some limitations when using wrap text:
+
+- Sorting with wrap text applied data.
+- Merge with wrap text