993171: Modified the getting started of Spreadsheet

Author: bhuvaneshdhakshinmaoorthy

Document-Processing/Excel/Spreadsheet/Angular/cell-range.md

@@ -24,7 +24,7 @@ Wrap text can be applied or removed to a cell or range of cells in the following
 The following code example shows the wrap text functionality in spreadsheet.
 
 {% tabs %}
-{% highlight ts tabtitle="app.component.ts" %}
+{% highlight ts tabtitle="app.ts" %}
 {% include code-snippet/spreadsheet/angular/wrap-text-cs1/src/app.component.ts %}
 {% endhighlight %}
 
@@ -64,7 +64,7 @@ The available merge options in spreadsheet are,
 The following code example shows the merge cells operation in spreadsheet.
 
 {% tabs %}
-{% highlight ts tabtitle="app.component.ts" %}
+{% highlight ts tabtitle="app.ts" %}
 {% include code-snippet/spreadsheet/angular/merge-cells-cs1/src/app.component.ts %}
 {% endhighlight %}
 
@@ -125,7 +125,7 @@ You can clear the highlighted invalid data by using the following ways,
 * Use the [`removeInvalidHighlight()`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/#removeinvalidhighlight) method programmatically.
 
 {% tabs %}
-{% highlight ts tabtitle="app.component.ts" %}
+{% highlight ts tabtitle="app.ts" %}
 {% include code-snippet/spreadsheet/angular/data-validation-cs1/src/app.component.ts %}
 {% endhighlight %}
 
@@ -154,7 +154,7 @@ You can apply custom data validation using two methods.
 The following code example demonstrates how to add custom data validation with a formula in a Spreadsheet.
 
 {% tabs %}
-{% highlight ts tabtitle="app.component.ts" %}
+{% highlight ts tabtitle="app.ts" %}
 {% include code-snippet/spreadsheet/angular/data-validation-cs2/src/app.component.ts %}
 {% endhighlight %}
 
@@ -238,7 +238,7 @@ You can do this by one of the following ways,
 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.component.ts" %}
+{% highlight ts tabtitle="app.ts" %}
 {% include code-snippet/spreadsheet/angular/autofill-cs1/src/app.component.ts %}
 {% endhighlight %}
 
@@ -281,7 +281,7 @@ Clear has the following types in the spreadsheet,
 Clear the cell contents and formats in the Spreadsheet document by using the [clear](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/#clear) method. The [clear](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/#clear) method has `type` and `range` as parameters. The following code example shows how to clear the cell contents and formats in the button click event.
 
 {% tabs %}
-{% highlight ts tabtitle="app.component.ts" %}
+{% highlight ts tabtitle="app.ts" %}
 {% include code-snippet/spreadsheet/angular/clear-cs1/src/app.component.ts %}
 {% endhighlight %}
 

Document-Processing/Excel/Spreadsheet/Angular/clipboard.md

@@ -60,7 +60,7 @@ Paste can be done in one of the following ways.
 > 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.component.ts" %}
+{% highlight ts tabtitle="app.ts" %}
 {% include code-snippet/spreadsheet/angular/clipboard-cs1/src/app.component.ts %}
 {% endhighlight %}
 
@@ -76,7 +76,7 @@ Paste can be done in one of the following ways.
 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.component.ts" %}
+{% highlight ts tabtitle="app.ts" %}
 {% include code-snippet/spreadsheet/angular/clipboard-cs2/src/app.component.ts %}
 {% endhighlight %}
 

Document-Processing/Excel/Spreadsheet/Angular/comment.md

@@ -174,7 +174,7 @@ You can bind **comment thread** to cells at initial load by providing a `comment
 In the below sample, comments are added to a specific cell using cell data binding. The "Comments" review pane is shown initially by enabling the `showCommentsPane` property, and comments are added using `updateCell` method in the `created` event.
 
 {% tabs %}
-{% highlight ts tabtitle="app.component.ts" %}
+{% highlight ts tabtitle="app.ts" %}
 {% include code-snippet/spreadsheet/angular/comment-cs1/src/app.component.ts %}
 {% endhighlight %}
 

Document-Processing/Excel/Spreadsheet/Angular/context-menu.md

@@ -69,7 +69,7 @@ You can add the custom items in context menu using the [`addContextMenuItems`](h
 In this demo, Custom Item is added after the Paste item in the context menu.
 
 {% tabs %}
-{% highlight ts tabtitle="app.component.ts" %}
+{% highlight ts tabtitle="app.ts" %}
 {% include code-snippet/spreadsheet/angular/contextmenu/addContextMenu-cs1/src/app.component.ts %}
 {% endhighlight %}
 
@@ -87,7 +87,7 @@ You can remove the items in context menu using the [`removeContextMenuItems`](ht
 In this demo, Insert Column item has been removed from the row/column header context menu.
 
 {% tabs %}
-{% highlight ts tabtitle="app.component.ts" %}
+{% highlight ts tabtitle="app.ts" %}
 {% include code-snippet/spreadsheet/angular/contextmenu/addContextMenu-cs2/src/app.component.ts %}
 {% endhighlight %}
 
@@ -105,7 +105,7 @@ You can enable/disable the items in context menu using the [`enableContextMenuIt
 In this demo, Rename item is disabled in the pager context menu.
 
 {% tabs %}
-{% highlight ts tabtitle="app.component.ts" %}
+{% highlight ts tabtitle="app.ts" %}
 {% include code-snippet/spreadsheet/angular/contextmenu/addContextMenu-cs3/src/app.component.ts %}
 {% endhighlight %}
 

Document-Processing/Excel/Spreadsheet/Angular/data-binding.md

@@ -20,7 +20,7 @@ To bind local data to the Spreadsheet, you can assign a JavaScript object array
 Refer to the following code example for local data binding.
 
 {% tabs %}
-{% highlight ts tabtitle="app.component.ts" %}
+{% highlight ts tabtitle="app.ts" %}
 {% include code-snippet/spreadsheet/angular/local-data-binding-cs1/src/app.component.ts %}
 {% endhighlight %}
 
@@ -42,7 +42,7 @@ By default, when a data source is bound to a sheet, columns are auto-assigned fr
 The following code example demonstrates how to customize the mapping of column data:
 
 {% tabs %}
-{% highlight ts tabtitle="app.component.ts" %}
+{% highlight ts tabtitle="app.ts" %}
 {% include code-snippet/spreadsheet/angular/field-mapping-cs1/src/app.component.ts %}
 {% endhighlight %}
 
@@ -60,7 +60,7 @@ To bind remote data to the Spreadsheet control, assign service data as an instan
 Refer to the following code example for remote data binding.
 
 {% tabs %}
-{% highlight ts tabtitle="app.component.ts" %}
+{% highlight ts tabtitle="app.ts" %}
 {% include code-snippet/spreadsheet/angular/remote-data-binding-cs1/src/app.component.ts %}
 {% endhighlight %}
 
@@ -78,7 +78,7 @@ Refer to the following code example for remote data binding.
 `OData` is a standardized protocol for creating and consuming data. You can retrieve data from OData service using the DataManager. Refer to the following code example for remote Data binding using OData service.
 
 {% tabs %}
-{% highlight ts tabtitle="app.component.ts" %}
+{% highlight ts tabtitle="app.ts" %}
 {% include code-snippet/spreadsheet/angular/remote-data-binding-cs2/src/app.component.ts %}
 {% endhighlight %}
 
@@ -94,7 +94,7 @@ Refer to the following code example for remote data binding.
 You can use WebApiAdaptor to bind spreadsheet with Web API created using OData endpoint.
 
 {% tabs %}
-{% highlight ts tabtitle="app.component.ts" %}
+{% highlight ts tabtitle="app.ts" %}
 {% include code-snippet/spreadsheet/angular/remote-data-binding-cs3/src/app.component.ts %}
 {% endhighlight %}
 
@@ -112,7 +112,7 @@ The Spreadsheet control can bind the data to individual cell in a sheet . To ach
 Refer to the following code example for cell data binding.
 
 {% tabs %}
-{% highlight ts tabtitle="app.component.ts" %}
+{% highlight ts tabtitle="app.ts" %}
 {% include code-snippet/spreadsheet/angular/cell-data-binding-cs1/src/app.component.ts %}
 {% endhighlight %}
 
@@ -142,7 +142,7 @@ The following table defines the arguments of the `dataSourceChanged` event.
 > For inserting a row at the end of the datasource range, you should insert a row below at the end of the range to trigger the `dataSourceChanged` event with action `add`.
 
 {% tabs %}
-{% highlight ts tabtitle="app.component.ts" %}
+{% highlight ts tabtitle="app.ts" %}
 {% include code-snippet/spreadsheet/angular/dynamic-data-binding-cs1/src/app.component.ts %}
 {% endhighlight %}
 
@@ -162,7 +162,7 @@ To use the [updateRange](https://ej2.syncfusion.com/angular/documentation/api/sp
 The following code example demonstrates how to dynamically update data using the [updateRange](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/#updaterange) method.
 
 {% tabs %}
-{% highlight ts tabtitle="app.component.ts" %}
+{% highlight ts tabtitle="app.ts" %}
 {% include code-snippet/spreadsheet/angular/dynamic-data-binding-cs2/src/app.component.ts %}
 {% endhighlight %}
 

Document-Processing/Excel/Spreadsheet/Angular/editing.md

@@ -39,7 +39,7 @@ To cancel the editing without saving the changes, you can use one of the followi
 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.component.ts" %}
+{% highlight ts tabtitle="app.ts" %}
 {% include code-snippet/spreadsheet/angular/editing-cs1/src/app.component.ts %}
 {% endhighlight %}
 

Document-Processing/Excel/Spreadsheet/Angular/filter.md

@@ -36,7 +36,7 @@ The [`applyFilter()`](https://ej2.syncfusion.com/angular/documentation/api/sprea
 The following code example shows `filter` functionality in the Spreadsheet control.
 
 {% tabs %}
-{% highlight ts tabtitle="app.component.ts" %}
+{% highlight ts tabtitle="app.ts" %}
 {% include code-snippet/spreadsheet/angular/filter-cs1/src/app.component.ts %}
 {% endhighlight %}
 
@@ -86,7 +86,7 @@ Filtering allows you to view specific rows in a spreadsheet while hiding the oth
 The following code example shows how to get the filtered rows.
 
 {% tabs %}
-{% highlight ts tabtitle="app.component.ts" %}
+{% highlight ts tabtitle="app.ts" %}
 {% include code-snippet/spreadsheet/angular/filter-cs2/src/app.component.ts %}
 {% endhighlight %}
 

Document-Processing/Excel/Spreadsheet/Angular/formatting.md

@@ -89,7 +89,7 @@ Custom Number formatting can be applied in following ways,
 The following code example shows the number formatting in cell data.
 
 {% tabs %}
-{% highlight ts tabtitle="app.component.ts" %}
+{% highlight ts tabtitle="app.ts" %}
 {% include code-snippet/spreadsheet/angular/format/number-cs1/src/app.component.ts %}
 {% endhighlight %}
 
@@ -144,7 +144,7 @@ configureLocalizedFormat(this.spreadsheetObj, deLocaleFormats);
 The following code example demonstrates how to configure culture-based formats for different cultures in the spreadsheet.
 
 {% tabs %}
-{% highlight ts tabtitle="app.component.ts" %}
+{% highlight ts tabtitle="app.ts" %}
 {% include code-snippet/spreadsheet/angular/format/globalization-cs1/src/app.component.ts %}
 {% endhighlight %}
 
@@ -215,7 +215,7 @@ Borders can be applied in the following ways,
 The following code example shows the style formatting in text and cells of the spreadsheet.
 
 {% tabs %}
-{% highlight ts tabtitle="app.component.ts" %}
+{% highlight ts tabtitle="app.ts" %}
 {% include code-snippet/spreadsheet/angular/format/number-cs2/src/app.component.ts %}
 {% endhighlight %}
 
@@ -313,7 +313,7 @@ You can clear the defined rules by using one of the following ways,
 * Using the [`clearConditionalFormat()`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/#clearconditionalformat) method to clear the defined rules.
 
 {% tabs %}
-{% highlight ts tabtitle="app.component.ts" %}
+{% highlight ts tabtitle="app.ts" %}
 {% include code-snippet/spreadsheet/angular/conditional-formatting-cs1/src/app.component.ts %}
 {% endhighlight %}
 

Document-Processing/Excel/Spreadsheet/Angular/formulas.md

@@ -31,7 +31,7 @@ When loading spreadsheet data with culture-based formula argument separators usi
 In the example below, the Spreadsheet component is rendered with the `German culture (de)`. Additionally, you can find references on how to set the culture-based argument separator and culture-based formatted numeric value as arguments to the formulas.
 
 {% tabs %}
-{% highlight ts tabtitle="app.component.ts" %}
+{% highlight ts tabtitle="app.ts" %}
 {% include code-snippet/spreadsheet/angular/formula-cs3/src/app.component.ts %}
 {% endhighlight %}
 
@@ -51,7 +51,7 @@ You can define and use an unsupported formula, i.e. a user defined/custom formul
 The following code example shows an unsupported formula in the spreadsheet.
 
 {% tabs %}
-{% highlight ts tabtitle="app.component.ts" %}
+{% highlight ts tabtitle="app.ts" %}
 {% include code-snippet/spreadsheet/angular/formula-cs1/src/app.component.ts %}
 {% endhighlight %}
 
@@ -67,7 +67,7 @@ Second, if you want to directly compute any formula or expression, you can use t
 The following code example shows how to use `computeExpression` method in the spreadsheet.
 
 {% tabs %}
-{% highlight ts tabtitle="app.component.ts" %}
+{% highlight ts tabtitle="app.ts" %}
 {% include code-snippet/spreadsheet/angular/formula-cs2/src/app.component.ts %}
 {% endhighlight %}
 
@@ -94,7 +94,7 @@ You can define a meaningful name for a cell range and use it in the formula for
 The following code example shows the usage of named ranges support.
 
 {% tabs %}
-{% highlight ts tabtitle="app.component.ts" %}
+{% highlight ts tabtitle="app.ts" %}
 {% include code-snippet/spreadsheet/angular/defined-name-cs1/src/app.component.ts %}
 {% endhighlight %}
 
@@ -123,7 +123,7 @@ For example, consider a spreadsheet where cell `C1` contains the formula `=A1+B1
 The following code example demonstrates how to set the Automatic calculation mode in a Spreadsheet.
 
 {% tabs %}
-{% highlight ts tabtitle="app.component.ts" %}
+{% highlight ts tabtitle="app.ts" %}
 {% include code-snippet/spreadsheet/angular/calculation-cs1/src/app.component.ts %}
 {% endhighlight %}
 
@@ -146,7 +146,7 @@ For example, imagine a spreadsheet where cell `C1` contains the formula `=A1+B1`
 The following code example demonstrates how to set the Manual calculation mode in a Spreadsheet.
 
 {% tabs %}
-{% highlight ts tabtitle="app.component.ts" %}
+{% highlight ts tabtitle="app.ts" %}
 {% include code-snippet/spreadsheet/angular/calculation-cs2/src/app.component.ts %}
 {% endhighlight %}
 

Document-Processing/Excel/Spreadsheet/Angular/freeze-pane.md

@@ -45,7 +45,7 @@ In the active spreadsheet, select the cell where you want to create frozen colum
 In this demo, the frozenColumns is set as ‘2’, and the frozenRows is set as ‘2’. Hence, the two columns on the left and the top two rows are frozen.
 
 {% tabs %}
-{% highlight ts tabtitle="app.component.ts" %}
+{% highlight ts tabtitle="app.ts" %}
 {% include code-snippet/spreadsheet/angular/freezepane-cs1/src/app.component.ts %}
 {% endhighlight %}