Documentation(EJ2-1012637): Documentation Improvement - port how to session to angular

Document-Processing-toc.html

@@ -5416,6 +5416,11 @@
 									<li><a href="/document-processing/excel/spreadsheet/angular/how-to/create-a-object-structure">Create a object structure </a></li>
 									<li><a href="/document-processing/excel/spreadsheet/angular/how-to/change-active-sheet">Changing the active sheet while importing a file</a></li>
 									<li><a href="/document-processing/excel/spreadsheet/angular/how-to/identify-the-context-menu-opened">Identify the context menu opened</a></li>
+									<li><a href="/document-processing/excel/spreadsheet/angular/how-to/find-replace-in-range">Find and replace the text within the selected range of cells</a></li>
+									<li><a href="/document-processing/excel/spreadsheet/angular/how-to/add-dynamic-cell-template">Add dynamic cell templates</a></li>
+									<li><a href="/document-processing/excel/spreadsheet/angular/how-to/add-cell-icon">Add an icon to the cell</a></li>
+									<li><a href="/document-processing/excel/spreadsheet/angular/how-to/get-filtered-data">Get the filtered row data</a></li>
+									<li><a href="/document-processing/excel/spreadsheet/angular/how-to/paste-only-values-without-formatting">Paste only values without formatting and styles</a></li>
 								</ul>
 							</li>
 							<li><a href="/document-processing/excel/spreadsheet/angular/mobile-responsiveness">Mobile Responsiveness</a></li>

Document-Processing/Excel/Spreadsheet/Angular/how-to/add-cell-icon.md

@@ -0,0 +1,25 @@
+---
+layout: post
+title: Add icons inside cells in Angular Spreadsheet component | Syncfusion
+description: Learn here all about adding icon inside cells using a custom template in Syncfusion Angular Spreadsheet component of Syncfusion Essential JS 2 and more.
+control: Spreadsheet 
+platform: document-processing
+documentation: ug
+---
+
+# Add Custom Icons to Cells in Angular Spreadsheet
+
+In the Syncfusion Spreadsheet, you can render custom icons inside specific cells by defining a custom template property within the cell model. During the [beforeCellRender](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#beforecellrender) event, the icon element can be appended to the corresponding table cell (td) by checking whether the cell contains this template property.
+
+The following sample demonstrates how to add icons to cells by assigning the template property in the cell definition. Additionally, a custom ribbon item named "Add Icon" is included under a new "Template" ribbon tab. When this ribbon item is selected, the Spreadsheet dynamically inserts an icon into the currently active cell.
+
+{% tabs %}
+{% highlight js tabtitle="app.ts" %}
+{% include code-snippet/spreadsheet/angular/add-icon-in-cell-cs1/src/app.ts %}
+{% endhighlight %}
+{% highlight ts tabtitle="main.ts" %}
+{% include code-snippet/spreadsheet/angular/add-icon-in-cell-cs1/src/main.ts %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "/document-processing/code-snippet/spreadsheet/angular/add-icon-in-cell-cs1" %}

Document-Processing/Excel/Spreadsheet/Angular/how-to/add-dynamic-cell-template.md

@@ -0,0 +1,25 @@
+---
+layout: post
+title: Dynamic cell template in Angular Spreadsheet component | Syncfusion
+description: Render dropdown templates inside cells in Syncfusion Angular Spreadsheet component of Syncfusion Essential JS 2 and more.
+control: Spreadsheet 
+platform: document-processing
+documentation: ug
+---
+
+# Create Dynamic Cell Templates with Dropdowns in Angular Spreadsheet
+
+You can add templates to cells in the Syncfusion Spreadsheet component by dynamically assigning a custom template property directly to individual cells. When a cell has this custom template property, you can use the [beforeCellRender](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#beforecellrender) event to append the desired template element to the cell.
+
+The following sample demonstrates how to insert a [Syncfusion Dropdown component](https://www.npmjs.com/package/@syncfusion/ej2-dropdowns) into Spreadsheet cells using this custom template property. Additionally, a custom ribbon item named "DropDown List" is included under a new "Template" ribbon tab. When this ribbon item is selected, the Spreadsheet dynamically inserts a dropdown into the currently active cell.
+
+{% tabs %}
+{% highlight js tabtitle="app.ts" %}
+{% include code-snippet/spreadsheet/angular/dynamic-cell-template-cs1/src/app.ts %}
+{% endhighlight %}
+{% highlight ts tabtitle="main.ts" %}
+{% include code-snippet/spreadsheet/angular/dynamic-cell-template-cs1/src/main.ts %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "/document-processing/code-snippet/spreadsheet/angular/dynamic-cell-template-cs1" %}

Document-Processing/Excel/Spreadsheet/Angular/how-to/find-replace-in-range.md

@@ -0,0 +1,25 @@
+---
+layout: post
+title: Find and replace in Angular Spreadsheet component | Syncfusion
+description: Learn here all about performing find and replace limited to the range in Syncfusion Angular Spreadsheet component of Syncfusion Essential JS 2 and more.
+control: Spreadsheet 
+platform: document-processing
+documentation: ug
+---
+
+# Find and replace the text within selected range of cells
+
+In Syncfusion Spreadsheet, the "Replace All" action by default searches and replaces a text throughout the entire sheet, regardless of the selected range. To limit "Replace All" to only the selected range, you can customize the addressCollection based on the selectedRange in the [actionBegin](https://ej2.syncfusion.com/documentation/api/spreadsheet/index-default#actionbegin) event when the action is `beforeReplaceAll`.
+
+The following sample demonstrates how to limit the "Replace All" operation to the currently selected range.
+
+{% tabs %}
+{% highlight js tabtitle="app.ts" %}
+{% include code-snippet/spreadsheet/angular/find-and-replace-cs1/src/app.ts %}
+{% endhighlight %}
+{% highlight ts tabtitle="main.ts" %}
+{% include code-snippet/spreadsheet/angular/find-and-replace-cs1/src/main.ts %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "/document-processing/code-snippet/spreadsheet/angular/find-and-replace-cs1" %}

Document-Processing/Excel/Spreadsheet/Angular/how-to/get-filtered-data.md

@@ -0,0 +1,25 @@
+---
+layout: post
+title: Filtered row data in Angular Spreadsheet component | Syncfusion
+description: Learn here all about getting filtered row data in Syncfusion Angular Spreadsheet component of Syncfusion Essential JS 2 and more.
+control: Spreadsheet 
+platform: document-processing
+documentation: ug
+---
+
+# Get filtered row data in Angular Spreadsheet
+
+Filtering in the Syncfusion Spreadsheet allows you to display only the rows that match your criteria, hiding all others. You can enable filtering by setting the [allowFiltering](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#allowfiltering) property, and apply filters either through the UI or programmatically using the [applyFilter](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#applyfilter) method. To identify which rows are filtered, iterate through the sheet's row collection and check the `isFiltered` property of each row object. This flag indicates whether a row is currently hidden due to filtering.
+
+The following example shows how to get the filtered rows from the Spreadsheet:
+
+{% tabs %}
+{% highlight js tabtitle="app.ts" %}
+{% include code-snippet/spreadsheet/angular/filter-cs2/src/app.ts %}
+{% endhighlight %}
+{% highlight ts tabtitle="main.ts" %}
+{% include code-snippet/spreadsheet/angular/filter-cs2/src/main.ts %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "/document-processing/code-snippet/spreadsheet/angular/filter-cs2" %}

Document-Processing/Excel/Spreadsheet/Angular/how-to/paste-only-values-without-formatting.md

@@ -0,0 +1,25 @@
+---
+layout: post
+title: Paste Without Formatting in Angular Spreadsheet component | Syncfusion
+description: Learn here about Paste only values without formatting during copy and paste in Syncfusion Angular Spreadsheet component of Syncfusion Essential JS 2 and more.
+control: Spreadsheet 
+platform: document-processing
+documentation: ug
+---
+
+# Paste Values Without Formatting and styles in Angular Spreadsheet
+
+In the Syncfusion angular Spreadsheet, you can make the paste action insert only the raw values into the cells, without bringing any formatting or styles from the copied content. This can be done by using the [actionBegin](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#actionbegin) event, where the Spreadsheet provides the details of the action being performed. When the action is a clipboard operation, you can set the paste type to Values, ensuring that only plain values are pasted into the sheet.
+
+The following example shows how to paste values without formatting.
+
+{% tabs %}
+{% highlight js tabtitle="app.ts" %}
+{% include code-snippet/spreadsheet/angular/paste-values-cs1/src/app.ts %}
+{% endhighlight %}
+{% highlight ts tabtitle="main.ts" %}
+{% include code-snippet/spreadsheet/angular/paste-values-cs1/src/main.ts %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "/document-processing/code-snippet/spreadsheet/angular/paste-values-cs1" %}

Document-Processing/code-snippet/spreadsheet/angular/add-icon-in-cell-cs1/angular.json

@@ -0,0 +1,70 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "syncfusion-component": {
+      "projectType": "application",
+      "schematics": {},
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist",
+            "index": "index.html",
+            "main": "src/main.ts",
+            "tsConfig": "tsconfig.json",
+            "styles": [
+              "src/styles.css"
+            ],
+            "assets": []
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kb",
+                  "maximumError": "10mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "buildOptimizer": false,
+              "optimization": false,
+              "vendorChunk": true,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "syncfusion-component:build:production"
+            },
+            "development": {
+              "buildTarget": "syncfusion-component:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        }
+      }
+    }
+  },
+  "cli": {
+    "analytics": false
+  }
+}

Document-Processing/code-snippet/spreadsheet/angular/add-icon-in-cell-cs1/index.html

@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>Syncfusion Angular Spreadsheet</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Angular Spreadsheet Control" />
+
+<meta name="author" content="Syncfusion" />
+    <style>
+        #loader {
+            color: #008cff;
+            font-family: 'Helvetica Neue', 'calibiri';
+            font-size: 16px;
+            height: 40px;
+            left: 45%;
+            position: absolute;
+            top: 45%;
+            width: 30%;
+        }
+    </style>
+</head>
+<body>
+    <app-container>
+        <div id='loader'>LOADING....</div>
+    </app-container>
+</body>
+</html>

Document-Processing/code-snippet/spreadsheet/angular/add-icon-in-cell-cs1/src/app.ts

@@ -0,0 +1,64 @@
+import { Component, ViewChild } from '@angular/core';
+import { SpreadsheetAllModule, SpreadsheetComponent } from '@syncfusion/ej2-angular-spreadsheet';
+
+@Component({
+  imports: [SpreadsheetAllModule],
+  standalone: true,
+  selector: 'app-container',
+  template: `
+    <style>
+      .e-custom-wrapper{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:#e0e0e0;margin-right:6px}
+      .e-custom-icon{font-size:12px}
+      /* small padding to show ribbon and sheet */
+      :host{display:block;padding:12px}
+    </style>
+    <ejs-spreadsheet #spreadsheet (created)="handleCreated()" (beforeCellRender)="handleBeforeCellRender($event)"></ejs-spreadsheet>
+  `
+})
+export class AppComponent {
+  @ViewChild('spreadsheet') public spreadsheetObj?: SpreadsheetComponent;
+
+  private createPlusIconWrapper(): HTMLElement {
+    const wrapperDiv = document.createElement('div');
+    wrapperDiv.className = 'e-custom-wrapper';
+    const iconSpan = document.createElement('span');
+    iconSpan.className = 'e-icons e-plus e-custom-icon';
+    wrapperDiv.appendChild(iconSpan);
+    return wrapperDiv;
+  }
+
+  public handleCreated(): void {
+    if (!this.spreadsheetObj) return;
+    // place plus-icon templates into A1,B1,C1
+    this.spreadsheetObj.updateCell({ template: 'plus-icon' } as any, 'A1');
+    this.spreadsheetObj.updateCell({ template: 'plus-icon' } as any, 'B1');
+    this.spreadsheetObj.updateCell({ template: 'plus-icon' } as any, 'C1');
+    this.spreadsheetObj.resize();
+    this.spreadsheetObj.addRibbonTabs([
+      {
+        header: { text: 'Template' },
+        content: [
+          {
+            text: 'Add Icon',
+            tooltipText: 'Initialize',
+            click: () => {
+              if (!this.spreadsheetObj) return;
+              const sheet: any = this.spreadsheetObj.getActiveSheet();
+              this.spreadsheetObj.updateCell({ template: 'plus-icon' } as any, sheet.activeCell);
+              this.spreadsheetObj.resize();
+            },
+          },
+        ],
+      },
+    ]);
+  }
+
+  public handleBeforeCellRender(args: any): void {
+    if (args.cell && args.cell.template === 'plus-icon') {
+      const wrapper = this.createPlusIconWrapper();
+      args.element.insertBefore(wrapper, args.element.firstChild);
+    }
+  }
+}
+
+

Document-Processing/code-snippet/spreadsheet/angular/add-icon-in-cell-cs1/src/main.ts

@@ -0,0 +1,4 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { AppComponent } from './app';
+import 'zone.js';
+bootstrapApplication(AppComponent).catch((err) => console.error(err));

Document-Processing/code-snippet/spreadsheet/angular/add-icon-in-cell-cs1/src/styles.css

@@ -0,0 +1,15 @@
+
+@import 'node_modules/@syncfusion/ej2-base/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-inputs/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-buttons/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-lists/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-navigations/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-popups/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-spreadsheet/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-grids/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-base/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-spreadsheet/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-buttons/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-splitbuttons/styles/material.css';

Document-Processing/code-snippet/spreadsheet/angular/add-icon-in-cell-cs1/tsconfig.json

@@ -0,0 +1,32 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "baseUrl": "./",
+    "outDir": "./dist/out-tsc",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "sourceMap": true,
+    "declaration": false,
+    "downlevelIteration": true,
+    "experimentalDecorators": true,
+    "moduleResolution": "node",
+    "importHelpers": true,
+    "target": "ES2022",
+    "module": "ES2022",
+    "useDefineForClassFields": false,
+    "lib": [
+      "ES2022",
+      "dom"
+    ]
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}